一、柵格布局系統(tǒng)
1.所有的行必須放在容器中.container 或container-fluid
container:
screen>1200px(超大PC顯示器-lg) 容器寬1170px
screen>992px(普通PC顯示器-md) 容器寬970px
screen>768px(平板顯示器-sm) 容器寬750px
screen<768px(手機(jī)顯示器-xs) 容器寬auto
container-fluid:
width:auto+befor+after
2.分為多行，一行最多分為12列
3.網(wǎng)頁內(nèi)容只能放在列中，不能放在行中
4.可以在col中再嵌套row
5.col分為四大類col-xs-i col-sm-i col-md-i col-lg-i,i值可以為1-12，值為某列的寬度
6.可以為一個(gè)列指定不同屏幕下的寬度
- col-lg-i 大PC
col-md-i 大PC 普通PC
col-sm-i 大PC 普通PC 平板
col-xs-i 大PC 普通PC 平板 手機(jī)-
hidden-lg 大PC
hidden-md 普通PC
hidden-sm 平板
hidden-xs 手機(jī)
9.列的偏移問題col-xs-offset-i 大PC 普通PC 平板 手機(jī)
col-sm-offset-i 大PC 普通PC 平板
col-md-offset-i 大PC 普通PC
col-lg-offset-i 大PC
10.補(bǔ)充.
-
- web開發(fā)頁面布局可以采用的方式
- 使用table做布局
簡單不易出錯(cuò)，但加載效率低
- 使用table做布局
- HTML+CSS
加載速度快，靈活，不易控制 - 使用bootstrap提供的柵格(grid layout)布局系統(tǒng)
加載速度快，靈活，支持響應(yīng)式功能，容易控制(有行和列的概念)
- css相關(guān)知識(shí)
- 如何解決父元素的第一個(gè)子元素margin-top越界問題
給父元素加border-top
給父元素指定padding-top
給父元素指定overflow:hidden
讓該元素不是第一個(gè)子元素
為父元素添加前置內(nèi)容生成-推薦使用
.parent:before {
content:" ";
display:table;
} - 如果解決所有子元素浮動(dòng)后，父元素高度變?yōu)?，且影響后續(xù)元素
給父元素指定overflow:hidden
為父元素指定高度
為父元素添加后置內(nèi)容生成-推薦使用
.parent:after {
content:"";
display:table;
clear:both;
}
- bootstrap系統(tǒng)中容器的特點(diǎn)
寬度做了媒體查詢
添加了前置和后置內(nèi)容生成，可以防止子元素的越界,浮動(dòng)影響
二、表單
1.默認(rèn)表單
單獨(dú)的表單控件會(huì)被自動(dòng)賦予一些全局樣式。所有設(shè)置了.form-control類的input、textarea和select元素都將被默認(rèn)設(shè)置寬度屬性為width:100%。 將label元素和前面提到的控件包裹在.form-group中可以獲得最好的排列
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
2.行內(nèi)表單
為form元素添加.form-inline類可使其內(nèi)容左對(duì)齊并且表現(xiàn)為inline-block級(jí)別的控件。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
</form>
3.水平表單
通過為表單添加.form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將label 標(biāo)簽和控件組水平并排布局。這樣做將改變
.form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再額外添加.row了
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
</form>
三、圖標(biāo)-字體
- glyphicons是一套收費(fèi)的圖標(biāo)字體，提供了web/移動(dòng)開發(fā)中常用的小圖標(biāo)
- bootstrap中可以免費(fèi)使用這套字體中的250+個(gè)，以服務(wù)器端字體形式出現(xiàn)的
- 圖標(biāo)字體的本質(zhì)不是圖片，而是字體
- glyphicon 圖標(biāo)字體只能用于空元素-不能包含任何內(nèi)容或子元素；
- 用法
<span class="glyphicon glyphicon-user"></span>
字體文件夾fonts必須跟html文件同級(jí)
四、 bootstrap-組件-按鈕組
btn-group 水平按鈕組
btn-group-vertical 豎直按鈕組
btn-group btn-group-justified 水平且兩端對(duì)齊的按鈕組
btn-group-lg
btn-group-xm
btn-group-xs
五、 bootstrap-組件-下拉菜單 重點(diǎn)簡單
-
必須html結(jié)構(gòu)
<div class="dropdown"> 相對(duì)定義的父元素 <a data-toggle="dropdown">觸發(fā)元素</a> <ul/div class="dropdown-menu">隱藏元素</ul/div> 絕對(duì)定位 </div> divider 分割線 dropdown-header 分類頭
六、 bootstrap-組件-導(dǎo)航 重點(diǎn)簡單
- 標(biāo)簽頁導(dǎo)航
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
data-toggle="tab" 用于切換 - 膠囊式導(dǎo)航 用于ul
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul> - 兩端對(duì)其的導(dǎo)航 nav nav-tabs nav-justified
- 豎直放置的膠囊導(dǎo)航 nav nav-pills nav-stacked
