BootStrap前端框架使用方法詳解

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

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

1.概念：

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

好處：

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

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

2.使用步驟：

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

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

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

<!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你想要的組件啦！

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

您可能感興趣的文章:

相關(guān)文章

詳解element-ui 表單校驗(yàn) Rules 配置常用黑科技
這篇文章主要介紹了element-ui 表單校驗(yàn) Rules 配置常用黑科技，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
js防止表單重復(fù)提交的兩種方法
第一種：用flag標(biāo)識(shí)，下面的代碼設(shè)置checkSubmitFlg標(biāo)志；第二種：在onsubmit事件中設(shè)置，在第一次提交后使提交按鈕失效，感興趣的朋友可以了解下
2013-09-09
js中符號(hào)轉(zhuǎn)意問(wèn)題示例探討
符號(hào)轉(zhuǎn)意，大家或許有所了解，知識(shí)在使用中或許不是那么的在意，其實(shí)這個(gè)問(wèn)題很重要，下面為大家講解下js符號(hào)轉(zhuǎn)意問(wèn)題相關(guān)知識(shí)，感興趣的朋友可以參考下
2013-08-08
js扁平數(shù)組和樹(shù)結(jié)構(gòu)相互轉(zhuǎn)換處理方法
這篇文章主要給大家介紹了關(guān)于js扁平數(shù)組和樹(shù)結(jié)構(gòu)相互轉(zhuǎn)換處理方法的相關(guān)資料,之前面試有遇到過(guò)這個(gè)問(wèn)題,面試官問(wèn)如何把一個(gè)數(shù)組數(shù)據(jù)扁平,然后轉(zhuǎn)化為Tree結(jié)構(gòu)數(shù)據(jù),工作中剛好也用到了,所以總結(jié)下,需要的朋友可以參考下
2023-07-07
JavaScript中關(guān)于for循環(huán)刪除數(shù)組元素內(nèi)容時(shí)出現(xiàn)的問(wèn)題
昨天在用for循環(huán)進(jìn)行數(shù)組去重的時(shí)候出現(xiàn)的問(wèn)題小結(jié)，怎么解決這個(gè)問(wèn)題呢，今天小編通過(guò)本文給大家講解下js循環(huán)刪除數(shù)組元素的方法，一起看看吧
2016-11-11
Javascript獲取某個(gè)月的天數(shù)
本文給大家分享使用getDaysInOneMonth(year, month)方法獲取某個(gè)月的天數(shù)，方法超簡(jiǎn)單，感興趣的朋友一起看看吧
2018-05-05
談?wù)凧avaScript中的函數(shù)
這篇文章主要介紹了JavaScript中的函數(shù)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下
2020-09-09
javascript實(shí)現(xiàn)驗(yàn)證身份證號(hào)的有效性并提示
下面分享的JS腳本是我用過(guò)的最完善的身份證號(hào)的驗(yàn)證程序了，因?yàn)橹挥姓嬲纳矸葑C號(hào)才能被通過(guò)，小伙伴們可以試試。直接復(fù)制運(yùn)行。
2015-04-04
JavaScript的new date等日期函數(shù)在safari中遇到的坑
safari中對(duì)于JavaScript的new Date函數(shù)的支持有一個(gè)比較奇怪的問(wèn)題，帶著這個(gè)奇怪的問(wèn)題我們通過(guò)本文一起學(xué)習(xí)吧
2016-10-10
js控制網(wǎng)頁(yè)前進(jìn)和后退的方法
這篇文章主要介紹了js控制網(wǎng)頁(yè)前進(jìn)和后退的方法,涉及javascript中history.go方法的相關(guān)使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-06-06