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