快捷導(dǎo)航

第二篇Bootstrap起步

更新時(shí)間：2016年06月21日 14:38:49 作者：-夏昊-

這篇文章主要介紹了第二篇Bootstrap起步的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

在上篇文章給大家介紹了Bootstrap的基礎(chǔ)知識(shí)，接下來通過本文給大家介紹

我們可以在http://getbootstrap.com下載bootstrap的文件

點(diǎn)擊左邊的download bootstrap可以下載bootstrap的css,javascript和字體庫的已編譯版本。點(diǎn)擊中間的download source可以下載bootstrap的源代碼。一般情況下我們使用bootstrap點(diǎn)擊左邊的已編譯版本下載就可以了。

如果下載的是已編譯版結(jié)構(gòu)是：

如果下載的是源代碼結(jié)構(gòu)是：

Dist文件夾里的內(nèi)容和已編譯版本內(nèi)容一樣.

如果需要使用bootstrap這個(gè)前端框架需要設(shè)置一些格式和引入一些文件，下面是使用Bootstrap的一個(gè)基本模板。

Bootstrap 使用了一些 HTML5 元素和 CSS 屬性。為了讓這些正常工作，需要使用 HTML5 文檔類型（Doctype）。因此，在頁面的開頭包含了以下代碼段：

bootstrap模板為使IE6、7、8版本（IE9以下版本）瀏覽器兼容html5新增的標(biāo)簽，引入下面代碼文件即可:

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理為使IE6、7、8版本瀏覽器兼容css3樣式，引入下面代碼

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

以下代碼告訴IE瀏覽器，IE8/9及以后的版本都會(huì)以最高版本IE來渲染頁面

<meta http-equiv="X-UA-Compatible" content="IE=edge">
以下代碼可以讓瀏覽器以最合適的大小來顯示相應(yīng)的頁面:
<meta name="viewport" content="width=device-width, initial-scale=1">

要使用bootstrap來搭建網(wǎng)頁，需要引入bootstrap的css文件，

<link href="~/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />

若要使用bootstrap里的javascript組件還需要引入bootstrap的js插件，因?yàn)閖s插件是基于jquery的所以還要先引入jquery腳本，注意jquery腳本需要放到bootstrap的js插件前面。

<script src="~/bootstrap-3.2.0-dist/js/jquery.min.js"></script>
 <script src="~/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>

以上所述是小編給大家介紹的第二篇Bootstrap起步的全部敘述，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

bootstrap

相關(guān)文章

JavaScript中Function詳解
函數(shù)是由關(guān)鍵字function、函數(shù)名加一組參數(shù)及置于大括號(hào)中需要執(zhí)行的一段語義定義的。今天我們就來詳細(xì)講解一下JavaScript中的Function。
2015-02-02
在JS方法中返回多個(gè)值的方法匯總
本文給大家匯總了在javascript方法中返回多個(gè)值的方法，都是在個(gè)人項(xiàng)目中檢驗(yàn)過的，這里推薦給大家，有需要的小伙伴可以參考下。
2015-05-05
js結(jié)合css實(shí)現(xiàn)登錄后才能復(fù)制的效果實(shí)例
很多網(wǎng)站都有登錄后才能復(fù)制的限制，什么原理呢？css屬性u(píng)ser-select:none，通常會(huì)采用這種方式來禁止復(fù)制文本。但瀏覽開發(fā)者工具-審查元素，取消此樣式后，就可以選中文本了。想要完整地禁止復(fù)制，還需要通過js控制選擇的內(nèi)容。
2023-07-07
簡單實(shí)用的js調(diào)試logger組件實(shí)現(xiàn)代碼
開發(fā)js組件的時(shí)間調(diào)試總是麻煩的，最常用的就是用alert或者debugger來測試js的運(yùn)行狀態(tài)。
2010-11-11
鼠標(biāo)焦點(diǎn)離開文本框時(shí)驗(yàn)證的js代碼
本文為大家介紹下利用js來驗(yàn)證文本框的值，當(dāng)鼠標(biāo)焦點(diǎn)離開文本框時(shí)進(jìn)行驗(yàn)證，示例代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
JS實(shí)時(shí)彈出新消息提示框并有提示音響起的實(shí)現(xiàn)代碼
本文給大家介紹JS實(shí)時(shí)彈出新消息提示框并有提示音響起的實(shí)現(xiàn)代碼，實(shí)現(xiàn)過程除了使用及時(shí)的推送技術(shù)外還使用ajax實(shí)現(xiàn)此功能，對(duì)js提示框提示音響起的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-04-04
網(wǎng)頁中右鍵功能的實(shí)現(xiàn)方法之contextMenu的使用
本文介紹一種網(wǎng)頁中實(shí)現(xiàn)右鍵功能的方案–contextMenu,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-02-02
es6數(shù)據(jù)變更同步到視圖層的方法
這篇文章主要介紹了es6數(shù)據(jù)變更同步到視圖層的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
js表單元素checked、radio被選中的幾種方法(詳解)
下面小編就為大家?guī)硪黄猨s表單元素checked、radio被選中的幾種方法(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
詳解TypeScript2.0標(biāo)記聯(lián)合類型
這篇文章主要介紹了TypeScript2.0標(biāo)記聯(lián)合類型，對(duì)TS感興趣的同學(xué)，可以參考下
2021-05-05