01-流體布局

流體布局,就是使用百分比來設置元素的寬度,元素的高度值固定,

calc()：可以通過計算的方式給元素添加尺寸,比如:width:calc(25%-4px);

box-sizing：content-box默認的盒子計算方式 2.border-box 盒子的計算方式從邊框開始,盒子的尺寸,邊框和內填充算在盒子內

?

02-響應式布局

響應式布局就是使用媒體查詢的方式,通過查詢瀏覽器的寬度,在不同的寬度下應用不同的樣式塊,每個樣式塊對應的是該寬度下的布局方式,從而實現響應式布局,響應式布局的頁面可以適配多種終端屏幕(pc,平板,手機)

?

操作代碼:

@media(max-width:1200px){
? div{
??? width:25%
? }

}

?

?

03-bootstrap介紹

簡單、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。

來自Twitter，是目前很受歡迎的前端框架之一。

Bootrstrap是基于HTML、CSS、JavaScript的，讓書寫代碼更容易。移動優先，響應式布局開發。

?

04-bootstrap容器

1.流體容器

container-fluid流體容器
<div class="container-fluid">流體容器</div>

?

2.響應式固定容器

container

判斷區間

1170

970

750

100%

?<div class="container">響應式固定容器</div>

?

3.bootstrap響應式查詢區間:

大于等于768

大于等于992

大于等于1200

?

4.bootstrap柵格系統

bootstrap將頁面橫向分為12等分,按照12等分定義了不同寬度等分的樣式類,這些樣式類組成了一套響應式,移動設備優先的流式柵格系統

col-log->1200排成一行,<1200 分別占一行

col-md->992排成一行, <992分別占一行

col-sm->768排成一行,小于768分別占一行

col-xs-始終占一行

?

列偏移

col-lg-offset-

col-md-offset-

col-sm-offset-

col-xs-offset-

?

bootstrap按鈕

btn聲明按鈕

btn-default默認按鈕樣式

btn-primay卓越首位

btn-success

btn-info

btn-warning

btn-danger

btn-link

btn-lg

btn-md

btn-sx

btn-block寬度是父元素寬度100%的按鈕

active

disabled

btn-group定義按鈕組

?

bootstrap表單

form聲明一個表單域

form-inline 內聯表單域

form-horizontal 水平排列表單域

form-group 表單組、包括表單文字和表單控件

form-control 文本輸入框、下拉列表控件樣式

checkbox checkbox-inline 多選框樣式

radio radio-inline 單選框樣式

input-group 表單控件組

input-group-addon 表單控件組物件樣式

input-group-btn 表單控件組物件為按鈕的樣式

form-group-lg 大尺寸表單

form-group-sm 小尺寸表單

?

bootstrap圖片

img-responsive聲明響應式圖片

?

bootstrap字體圖標

通過字體代替圖標,font文件夾需要和css文件夾在同一級目錄

?

bootstrap導航條

1.navbar聲明導航條

2.navbar-default 聲明默認的導航條的樣式

3.navbar-inverse 聲明反白的導航條樣式

4.navbar-static-top 去掉導航條的圓角

5.navbar-fixed-top 固定到頂部的導航條

6.navbar-fixed-bottom 固定到底部的導航條

7.navbar-header 聲明logo的容器

8.navbar-brand 針對logo等固定內容的樣式

9.nav navbar-nav 定義導航條中的菜單

10.navbar-form 定義導航條中的表單

11.navbar-btn 定義導航條中的按鈕

12.navbar-text 定義導航條中的文本

13.navbar-left 菜單靠左

14.navbar-right 菜單靠右

?

路徑導航

? <olclass="breadcrumb">
? <li><ahref="#">Home</a></li>
? <li><a href="#">Library</a></li>
? <liclass="active">Data</li>
</ol>

?

巨幕

? <divclass="jumbotron">
? <divclass="container">
??? ...
? </div>
</div>

?

bootstrap模態框

1.modal聲明一個模態框

2.modal-dialog定義模態框尺寸

3.modal-lg定義大尺寸模態框

4.modal-sm定義小尺寸模態框

5.modal-header

6.modal-body

7.modal-footer

?

bootstrap下拉菜單

1.drapdown-toggle

2.dropdown-menu

?

bootstrap 隱藏類

1.hidden-xs

2.hidden-sm

3.hidden-md

4.hidden-lg

總結

以上是生活随笔為你收集整理的建设网站需要的Bootstrap介绍与操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。