-
移除body的margin聲明
設(shè)置body的背景色為白色
為排版設(shè)置了基本的字體、字號和行高
設(shè)置全局鏈接顏色，且當鏈接處于懸浮“:hover”狀態(tài)時才會顯示下劃線樣式查看全部 -
在實際項目中，對于一些重要的文本，希望突出強調(diào)的部分都會做另外的樣式處理。查看全部
-
Bootstrap由MARK OTTO和Jacob Thornton所設(shè)計和建立，在github上開源之后，迅速成為該站上最多人watch&fork的項目。大量工程師踴躍為該項目貢獻代碼，社區(qū)驚人地活躍，代碼版本進化非?？焖?，官方文檔質(zhì)量極其高(可以說是優(yōu)雅)，同時涌現(xiàn)了許多基于Bootstrap建設(shè)的網(wǎng)站：界面清新、簡潔;要素排版利落大方查看全部
-
我們在Web的制作中，常常會碰到在一個標題后面緊跟著一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了<small>標簽來制作副標題。這個副標題具有其自己的一些獨特樣式：查看全部
-
1、重新設(shè)置了margin-top和margin-bottom的值，? h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
3、固定不同級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。查看全部 -
移除body的margin聲明
設(shè)置body的背景色為白色
為排版設(shè)置了基本的字體、字號和行高
設(shè)置全局鏈接顏色，且當鏈接處于懸浮“:hover”狀態(tài)時才會顯示下劃線樣式查看全部 -
bootstrap模板為使IE6、7、8版本（IE9以下版本）瀏覽器兼容html5新增的標簽，引入下面代碼文件即可。查看全部
-
Bootstrap中JS插件依賴于jQuery因此jQuery要在Bootstrap之前引用查看全部
-
bootStrap 是簡潔強大的前端開發(fā)框架，前端工具集；
是簡單、靈活的用于搭建web頁面的HTML，CSS，JavaScript的工具集
它基于HTML5與CSS3，卓越的兼容性查看全部 -
Bootstrap標題樣式進行了以下顯著的優(yōu)化重置：
1、重新設(shè)置了margin-top和margin-bottom的值， ?h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
3、固定不同級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。查看全部 -
1.bootstrap不支持ie的兼容模式；(加入如下代碼：<meta http-equiv="X-UA-Compatible" content="IE=edge">可在IE瀏覽器中運行最新的渲染模式)
2.初始化移動瀏覽器顯示<meta name="viewport" content="width=device-width,initial-scale=1">(移動瀏覽器是把頁面放在一個虛擬的視口中，即viewport，通常這個虛擬的視口比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的視口中，但是這樣會破壞沒有針對移動瀏覽器優(yōu)化的網(wǎng)頁布局)（viewport可用于控制大小及縮放）（代碼可理解為讓視口的寬度為物理設(shè)備上真實的分辨率，即寬度，初始的縮放比例為1，即不縮放）
3.載入bootstrap的css樣式，用link，如下圖
若IE版本低于IE9，則加入圖中代碼http://img1.sycdn.imooc.com//553b9b2f00018c0d12000530-120-68.jpg
4. 加入jQuery和js插件（bootstrap中的js插件依賴于jquery，因此jquery要在bootstrap之前引用。）
js文件放在body的最下面
html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節(jié)點包裹子元素，并且不能應(yīng)用CSS樣式。讓CSS 樣式應(yīng)用在未知元素上只需執(zhí)行 document.createElement(elementName) 即可實現(xiàn)。html5shiv就是根據(jù)這個原理創(chuàng)建的。
指定用戶是否可以縮放視區(qū)，即縮放Web頁面的視圖。"是user-scalable指令 ,值為yes時允許用戶進行縮放，值為no時不允許縮放。查看全部 -
Bootstrap擁有的組件樣式，包括按鈕、表格、標簽、導(dǎo)航等。
查看全部 -
在IE運行最新的渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
初始化移動窗口顯示
<meta name="viewport" content="width=device-width,initial-scale=1">
查看全部 -
v2版本:支持廣泛瀏覽器,因為兼容性包袱,本身功能不夠激進,代碼不夠簡潔(v2.3.2后不再跟新)
v3版本:放棄了IE7、火狐3.x版本的支持, 雖然支持Ie8,由于它對css3的支持有限,所以呈現(xiàn)效果也大打折扣
模版代碼:
<!doctype?html> <html> ??<head> ????<meta?charset="utf-8"> ????<meta?http-equiv="X-UA-Compatible"?content="IE=edge"> ?????<!--在IE運行最新的渲染模式--> ????<meta?name="viewport"?content="width=device-width,?initial-scale=1"> ????<!--初始化移動瀏覽顯示,?上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！?--> ????<title>Bootstrap?101?Template</title> ????<!--?Bootstrap?--> ????<link?rel="stylesheet"?> ????<!--?HTML5?shim?和?Respond.js?是為了讓?IE8?支持?HTML5?元素和媒體查詢（media?queries）功能?--> ????<!--?警告：通過?file://?協(xié)議（就是直接將?html?頁面拖拽到瀏覽器中）訪問頁面時?Respond.js?不起作用?--> ????<!--[if?lt?IE?9]> ??????<script?src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> ??????<script?src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> ????<![endif]--> ??</head> ??<body> ????<h1>你好，世界！</h1> ????<!--?jQuery?(Bootstrap?的所有?JavaScript?插件都依賴?jQuery，所以必須放在前邊)?--> ????<script?src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"?integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"?crossorigin="anonymous"></script> ????<!--?加載?Bootstrap?的所有?JavaScript?插件。你也可以根據(jù)需要只加載單個插件。?--> ????<script?src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"?integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"?crossorigin="anonymous"></script> ??</body> </html>
查看全部 -
概念:簡潔、靈活的用于搭建Web頁面的HTML、CSS、JavaScript的工具集(簡潔強大的前端開發(fā)框架,讓web開發(fā)更迅速、更簡單)
查看全部 -
膠囊形（pills）導(dǎo)航聽起來有點別扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導(dǎo)航。當前項高亮顯示，并帶有圓角效果。其實現(xiàn)方法和“nav-tabs”類似，同樣的結(jié)構(gòu)，只需要把類名“nav-tabs”換成“nav-pills”即可
查看全部 -
Bootstrap框架中制作導(dǎo)航條主要通過“.nav”樣式。默認的“.nav”樣式不提供默認的導(dǎo)航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類。
查看全部 -
在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設(shè)下拉菜單有兩個組，那么組與組之間可以通過添加一個空的<li>，并且給這個<li>添加類名“divider”來實現(xiàn)添加下拉分隔線的功能。對應(yīng)的樣式代碼：
查看全部 -
1、使用一個名為“dropdown”的容器包裹了整個下拉菜單元素，示例中為:
<div class="dropdown"></div>
2、使用了一個<button>按鈕做為父菜單，并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致，此示例為:
data-toggle="dropdown"
3、下拉菜單項使用一個ul列表，并且定義一個類名為“dropdown-menu”，此示例為:
<ul class="dropdown-menu">
查看全部 -
1、不管是checkbox還是radio都使用label包起來了
2、checkbox連同label標簽放置在一個名為“.checkbox”的容器內(nèi)
3、radio連同label標簽放置在一個名為“.radio”的容器內(nèi)
在Bootstrap框架中，主要借助“.checkbox”和“.radio”樣式，來處理復(fù)選框、單選按鈕與標簽的對齊方式。查看全部 -
有時候為了讓表格更具閱讀性，需要將表格制作成類似于斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現(xiàn)這種表格效果并不困難，只需要在<table class="table">的基礎(chǔ)上增加類名“.table-striped”即可
查看全部
舉報