第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

列偏移

右偏移：col-md-push-8

左偏移：col-md-pull-4

<div class="container">

? <div class="row">

? ? <div class="col-md-4 col-md-push-8">.col-md-4</div>

? ? <div class="col-md-8 col-md-pull-4">.col-md-8</div>

? </div>

</div>

列偏移

不希望相鄰的兩個列緊靠在一起，但又不想使用margin或者其他的技術(shù)手段來。這個時候就可以使用列偏移（offset）功能來實現(xiàn)。使用列偏移也非常簡單，只需要在列元素上添加類名“col-md-offset-*”(其中星號代表要偏移的列組合數(shù))，那么具有這個類名的列就會向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示該列向右移動4個列的寬度

?<div class="row">

? ? <div class="col-md-4">.col-md-4</div>

? ? <div class="col-md-4 col-md-offset-4">列向右移動四列的間距</div>

? </div>

網(wǎng)格的用法

列組合簡單理解就是更改數(shù)字來合并列（原則：列總和數(shù)不能超12），有點類似于表格的colspan屬性

<div?class="container">
??<div?class="row">
????<div?class="col-md-4">.col-md-4</div>
????<div?class="col-md-8">.col-md-8</div>
??</div>
??<div?class="row">
????<div?class="col-md-4">.col-md-4</div>
????<div?class="col-md-4">.col-md-4</div>
????<div?class="col-md-4">.col-md-4</div>
??</div>
??<div?class="row">
????<div?class="col-md-3">.col-md-3</div>
????<div?class="col-md-6">.col-md-6</div>
????<div?class="col-md-3">.col-md-3</div>
?</div>
</div>

bootstrap的網(wǎng)格

1. 數(shù)據(jù)行(.row)必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內(nèi)距(padding)。

2. 在行(.row)中可以添加列(.column)，但列數(shù)之和不能超過平分的總列數(shù)，比如12
   

<div?class="container">
<div?class="row">
??<div?class="col-md-4"></div>
??<div?class="col-md-8"></div>

圖像在網(wǎng)頁制作中也是常要用到的元素，在Bootstrap框架中對于圖像的樣式風(fēng)格提供以下幾種風(fēng)格：

1、img-responsive：響應(yīng)式圖片，主要針對于響應(yīng)式設(shè)計
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片

<img??alt="140x140"?src="http://placehold.it/140x140">
<img??class="img-rounded"?alt="140x140"?src="http://placehold.it/140x140">
<img??class="img-circle"?alt="140x140"?src="http://placehold.it/140x140">
<img??class="img-thumbnail"?alt="140x140"?src="http://placehold.it/140x140">
<img??class="img-responsive"?alt="140x140"?src="http://placehold.it/140x140">

button的禁用

在Bootstrap框架中，要禁用按鈕有兩種實現(xiàn)方式：

方法1：在標簽中添加disabled屬性

方法2：在元素標簽中添加類名“disabled”

兩者的主要區(qū)別是：

“.disabled”樣式不會禁止按鈕的默認行為，比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行為，則需要通過JavaScript這樣的語言來處理。對于<a>標簽也存在類似問題，如果通過類名“.disable”來禁用按鈕，其鏈接行為是無法禁止。而在元素標簽中添加“disabled”屬性的方法是可以禁止元素的默認行為的。

button的激活和懸浮，焦點狀態(tài)

正常button有激活和焦點，懸浮三種狀態(tài)

但如果用a偽裝button需要在class中添加.active

bootstrap中的塊狀按鈕用(“btn-block”)

<button?class="btn-block"?type="button">大型按鈕.btn-lg</button>

bootstrap中按鈕大小(btn-lg大，btn-sm小，btn-xs超小)

<button?class="btn?btn-lg"?type="button">大型按鈕.btn-lg</button>
<button?class="btn"?type="button">正常按鈕</button>
<button?class="btn?btn-sm"?type="button">小型按鈕.btn-sm</button>
<button?class="btn?btn-xs"?type="button">超小型按鈕.btn-xs</button>

button樣式

.btn-primary:藍

.btn-info:淺藍

.btn-success:綠

.btn-warning:黃

.btn-danger:紅

.btn-link:按鈕轉(zhuǎn)化成鏈接風(fēng)格

在bootstrap中用a，input-submit，span，div顯示為button

<button?class="btn?btn-default"?type="button">button標簽按鈕</button>
<input?type="submit"?class="btn?btn-default"?value="input標簽按鈕"/>
<a?href="##"?class="btn?btn-default">a標簽按鈕</a>
<span?class="btn?btn-default">span標簽按鈕</span>
<div?class="btn?btn-default">div標簽按鈕</div>

button的風(fēng)格

“.btn”定義了一個基礎(chǔ)的按鈕風(fēng)格，然后通過“.btn-default”定義了一個默認的按鈕風(fēng)格。默認按鈕的風(fēng)格就是在基礎(chǔ)按鈕的風(fēng)格的基礎(chǔ)上修改了按鈕的背景顏色、邊框顏色和文本顏色。

<button?class="btn?btn-default"?type="button">默認按鈕</button>

bootstrap的button(class中加btn)

<button?class="btn"?type="button">我是一個基本按鈕</button>

表單驗證后的提示信息

使用了一個"help-block"樣式，將提示信息以塊狀顯示，并且顯示在控件底部。

<form?role="form">
<div?class="form-group?has-success?has-feedback">
??<label?class="control-label"?for="inputSuccess1">成功狀態(tài)</label>
??<input?type="text"?class="form-control"?id="inputSuccess1"?placeholder="成功狀態(tài)"?>
??<span?class="help-block">你輸入的信息是正確的</span>
??<span?class="glyphiconglyphicon-ok?form-control-feedback"></span>
</div>
??…
</form>

表單驗證的成功，警告，錯誤狀態(tài)

1、.has-warning:警告狀態(tài)（黃色）
2、.has-error：錯誤狀態(tài)（紅色）
3、.has-success：成功狀態(tài)（綠色）
使用的時候只需要在form-group容器上對應(yīng)添加狀態(tài)類名。

<form?role="form">
<div?class="form-group?has-success">
??<label?class="control-label"?for="inputSuccess1">成功狀態(tài)</label>
??<input?type="text"?class="form-control"?id="inputSuccess1"?placeholder="成功狀態(tài)"?>
</div>
<div?class="form-group?has-warning">
??<label?class="control-label"?for="inputWarning1">警告狀態(tài)</label>
??<input?type="text"?class="form-control"?id="inputWarning1"?placeholder="警告狀態(tài)">
</div>
<div?class="form-group?has-error">
??<label?class="control-label"?for="inputError1">錯誤狀態(tài)</label>
??<input?type="text"?class="form-control"?id="inputError1"?placeholder="錯誤狀態(tài)">
</div>
</form>