BootStrap前端框架使用方法詳解

更新時(shí)間：2020年02月26日 12:06:49 作者：遍唱陽春

這篇文章主要介紹了BootStrap前端框架使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1.概念：

Bootstrap，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。

好處：

1.定義了很多的css樣式和js插件。我們開發(fā)人員直接可以使用這些樣式和插件得到豐富的頁面效果。
2.響應(yīng)式布局。

同一套頁面可以兼容不同分辨率的設(shè)備。

2.使用步驟：

1.下載Bootstrap,官網(wǎng)地址：https://v3.bootcss.com

2.在項(xiàng)目中將這三個(gè)文件夾復(fù)制

3.創(chuàng)建html頁面，引入必要的資源文件

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
      <title>Bootstrap HelloWorld</title>
    
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
    
    
      <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
      <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
    <h1>你好，世界！</h1>
    
    </body>
    </html>

4.然后就可以去官網(wǎng)上copy你想要的組件啦！

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)通過滑塊改變網(wǎng)頁顏色
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)通過滑塊改變網(wǎng)頁顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
詳解微信小程序之一鍵復(fù)制到剪切板
這篇文章主要介紹了微信小程序一鍵復(fù)制到剪切板，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
javascript實(shí)現(xiàn)圖片左右滾動(dòng)效果【可自動(dòng)滾動(dòng)，有左右按鈕】
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片左右滾動(dòng)效果,可實(shí)現(xiàn)自動(dòng)滾動(dòng),帶有左右按鈕功能,基于插件scrollPic.js實(shí)現(xiàn),附帶了相應(yīng)的demo源碼供讀者下載參考,需要的朋友可以參考下
2016-09-09
javascript日期計(jì)算實(shí)例分析
這篇文章主要介紹了javascript日期計(jì)算,涉及javascript針對(duì)日期計(jì)算的相關(guān)技巧,這里需要注意索引的使用,需要的朋友可以參考下
2015-06-06
用JavaScrpt實(shí)現(xiàn)文件夾簡單輕松加密的實(shí)現(xiàn)方法圖文
電腦里經(jīng)常會(huì)存儲(chǔ)著重要文件，這些文件需要進(jìn)行加密，有許多方法來實(shí)現(xiàn)。但如果想對(duì)一個(gè)文件夾里的所有文件都進(jìn)行加密，數(shù)量少還可以，要是數(shù)量多豈不是得把人累死？
2008-09-09
微信小程序自定義波浪組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義波浪組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
原生JS發(fā)送異步數(shù)據(jù)請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了原生JS發(fā)送異步數(shù)據(jù)請(qǐng)求的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果
這篇文章主要介紹了微信小程序基于movable-view實(shí)現(xiàn)滑動(dòng)刪除效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01
nodejs分離html文件里面的js和css的方法
這篇文章主要介紹了nodejs分離html文件里面的js和css的方法，本文需要分離出一個(gè)html 文件里面的script 和style 里面的內(nèi)容，然后單獨(dú)生成js文件和css 文件，感興趣的可以了解一下
2019-04-04
微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果示例
這篇文章主要介紹了微信小程序基于canvas漸變實(shí)現(xiàn)的彩虹效果,結(jié)合實(shí)例形式分析了微信小程序線性漸變及圓形漸變的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-05-05