激情操人网站,日本有码三级在线,97在免费线观看视频

Bootstrap必須在HTML5中使用
Bootstrap對(duì)標(biāo)題進(jìn)行了優(yōu)化部署

標(biāo)題

h1~h3的margin為20px；h4-h6的margin為10px
定義了6個(gè)類(lèi)名。h1 h2 h3 h4 h5 h6
大?。篽1為36px，依次減6

副標(biāo)題的使用

副標(biāo)題

1、行高都是1，而且font-weight設(shè)置了normal變成了常規(guī)效果（不加粗），同時(shí)顏色被設(shè)置為灰色（#999）。
2、由于<small>內(nèi)的文本字體在h1_{h3內(nèi)，其大小都設(shè)置為當(dāng)前字號(hào)的65%；而在h4}h6內(nèi)的字號(hào)都設(shè)置為當(dāng)前字號(hào)的75%；

段落可以通過(guò)“.lead”突出文本
強(qiáng)調(diào)相關(guān)的類(lèi)

.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍(lán)色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍(lán)色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險(xiǎn)，使用褐色（#a94442）

強(qiáng)調(diào)文本類(lèi)

text-justify是兩端對(duì)齊
“.list-unstyled”去除無(wú)序列表前面的點(diǎn)，同時(shí)去除邊距

去點(diǎn)列表
內(nèi)聯(lián)列表 “.list-inline”,將垂直列表?yè)Q成水平列表，用于制作導(dǎo)航欄
水平定義列表通過(guò)“.dl-horizontal”實(shí)現(xiàn)，但只有屏幕大與768px的時(shí)候才有效果
代碼的顯示

1、使用<code></code>來(lái)顯示單行內(nèi)聯(lián)代碼
2、使用<pre></pre>來(lái)顯示多行塊代碼
3、使用<kbd></kbd>來(lái)顯示用戶輸入代碼

通過(guò)在pre標(biāo)簽添上類(lèi)名".pre.scrollable"使代碼區(qū)域最高為340px，超出這個(gè)高度時(shí)出現(xiàn)滾動(dòng)條
table

? .table：基礎(chǔ)表格
? .table-striped：斑馬線表格
? .table-bordered：帶邊框的表格
? .table-hover：鼠標(biāo)懸停高亮的表格
? .table-condensed：緊湊型表格
? .table-responsive：響應(yīng)式表格

Bootstrap的表單默認(rèn)是垂直的，要使用水平的表單需要添加“.form-horizontal”

.form-horizontal
".form-inlline"將表單元素設(shè)置成內(nèi)聯(lián)元素，在一行顯示
關(guān)于表單輸入框，要使輸入框不出錯(cuò)，需要添加類(lèi)名“.form-control”
-單選復(fù)選按鈕想要水平顯示，添加類(lèi)名“.checkbox-inline”,".radio-inline"
button

button
表單控制大小

可以通過(guò)設(shè)置控件的height，line-height，padding和font-size等屬性來(lái)實(shí)現(xiàn)控件的高度設(shè)置
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大
這兩個(gè)類(lèi)適用于表單中的input，textarea和select控件

設(shè)置焦點(diǎn)狀態(tài)
焦點(diǎn)狀態(tài)是通過(guò)偽類(lèi)“:focus”來(lái)實(shí)現(xiàn)。Bootstrap框架中表單控件的焦點(diǎn)狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果
要讓控件在焦點(diǎn)狀態(tài)下有下面樣式效果，需要給控件添加類(lèi)名“.form-control”

右為焦點(diǎn)狀態(tài)
表單禁用狀態(tài)
Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實(shí)現(xiàn)方法是一樣的，在相應(yīng)的表單控件上添加屬性“disabled”。和其他表單的禁用狀態(tài)不同的是，Bootstrap框架做了一些樣式風(fēng)格的處理
示例:在需要禁用的表單控件上加上“disabled”即可

<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>

對(duì)于整個(gè)禁用的域中，如果legend中有輸入框的話，這個(gè)輸入框是無(wú)法被禁用的

<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，但是我沒(méi)被禁用，不信？單擊試一下" /></legend>
    …
</fieldset>
</form>

表單驗(yàn)證
在制作表單時(shí)，不免要做表單驗(yàn)證。同樣也需要提供驗(yàn)證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態(tài)（黃色）
2、.has-error：錯(cuò)誤狀態(tài)（紅色）
3、.has-success：成功狀態(tài)（綠色）
使用的時(shí)候只需要在form-group容器上對(duì)應(yīng)添加狀態(tài)類(lèi)名。
按鈕大小
.btn-lg 變大
.btn-sm 變小
.btn-xs 超小
使用.btn-block使得按鈕寬度充滿整個(gè)容器
圖像在網(wǎng)頁(yè)制作中也是常要用到的元素，在Bootstrap框架中對(duì)于圖像的樣式風(fēng)格提供以下幾種風(fēng)格：

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

圖標(biāo)定制網(wǎng)站
網(wǎng)格系統(tǒng)
列偏移 col-md-offset-* col-xs-不支持列偏移
列排序 col-md-pull-
列嵌套

-下拉菜單必須引入1.90版本以上的jQuery和bootstrap.js才能使用
添加分割線

<li role="presentation" class="divider"></li>

菜單頭

<li role="presentation" class="dropdown-header">菜單頭</li>

按鈕組的寫(xiě)法

<div class="btn-toolbar">
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
</div>

使用"btn-group-vertical"使按鈕組垂直排列
使用“btn-group-justified”使按鈕等分父容器

導(dǎo)航

<ul class="nav nav-tabs">
    <li><a href="##">Home</a></li>
    <li><a href="##">CSS3</a></li>
    <li><a href="##">Sass</a></li>
    <li><a href="##">jQuery</a></li>
    <li><a href="##">Responsive</a></li>
</ul>

默認(rèn)是水平導(dǎo)航，通過(guò)active和disabled來(lái)設(shè)置默認(rèn)選中和不可選

默認(rèn)樣式

-膠囊型導(dǎo)航,ul添加類(lèi)“.nav-pills”

膠囊型導(dǎo)航

-設(shè)置垂直導(dǎo)航，ul添加類(lèi)“.nav-stacked”

垂直導(dǎo)航

自適應(yīng)導(dǎo)航，ul添加類(lèi)".nav-justified"，自適應(yīng)寬度

自適應(yīng)導(dǎo)航
二級(jí)導(dǎo)航，添加li元素

<li class="dropdown">
      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
      </ul>
  </li>

二級(jí)導(dǎo)航

面包屑導(dǎo)航，主要用于提醒用戶現(xiàn)在所在頁(yè)面位置

<ol class="breadcrumb">
  <li><a href="#">首頁(yè)</a></li>
  <li><a href="#">我的書(shū)</a></li>
  <li class="active">《圖解CSS3》</li>
</ol>

面包屑導(dǎo)航

導(dǎo)航條

基礎(chǔ)導(dǎo)航條

<div class="navbar navbar-default" role="navigation">
  　<div class="navbar-header">
  　    <a href="##" class="navbar-brand">慕課網(wǎng)</a>
  　</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">網(wǎng)站首頁(yè)</a></li>
      <li class="dropdown">
        <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
        </ul>
     </li>
      <li><a href="##">名師介紹</a></li>
      <li><a href="##">成功案例</a></li>
      <li><a href="##">關(guān)于我們</a></li>
     </ul>
  <form action="##" class="navbar-form navbar-left" rol="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="請(qǐng)輸入關(guān)鍵詞" />
    </div>
     <button type="submit" class="btn btn-default">搜索</button>
   </form>
</div>

基礎(chǔ)導(dǎo)航條

添加二級(jí)菜單和狀態(tài)與上面相同
添加表單

<form action="##" class="navbar-form navbar-left" rol="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="請(qǐng)輸入關(guān)鍵詞" />
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
</form>

固定導(dǎo)航條

.navbar-fixed-top：導(dǎo)航條固定在瀏覽器窗口頂部
.navbar-fixed-bottom：導(dǎo)航條固定在瀏覽器窗口底部

響應(yīng)式導(dǎo)航條
反色導(dǎo)向條，外部div添加類(lèi)".navbar-inverse"

反色導(dǎo)向條
分頁(yè)導(dǎo)航

<ul class="pagination pagination">
  <li><a href="#">&laquo;第一頁(yè)</a></li>
  <li><a href="#">11</a></li>
  <li><a href="#">12</a></li>
  <li class="active"><a href="#">13</a></li>
  <li><a href="#">14</a></li>
  <li><a href="#">15</a></li>
  <li class="disabled"><a href="#">最后一頁(yè)&raquo;</a></li>
</ul>

可通過(guò)類(lèi)“.pagination-lg”和類(lèi)“.pagination-sm”來(lái)控制按鍵的大小

分頁(yè)導(dǎo)航

翻頁(yè)

<!--代碼-->
<ul class="pager">
  <li><a href="#">&laquo;上一頁(yè)</a></li>
  <li><a href="#">下一頁(yè)&raquo;</a></li>
</ul> 
<!--左右對(duì)齊-->
<ul class="pager">
  <li class="previous"><a href="#">&laquo;上一頁(yè)</a></li>
  <li class="next"><a href="#">下一頁(yè)&raquo;</a></li>
</ul> 
<!--禁止?fàn)顟B(tài)-->
<ul class="pager">
  <li class="disabled"><span>&laquo;上一頁(yè)</span></li>
  <li><a href="#">下一頁(yè)&raquo;</a></li>
</ul>

翻頁(yè)

標(biāo)簽

<span class="label label-default">默認(rèn)標(biāo)簽</span>
<span class="label label-primary">主要標(biāo)簽</span>
<span class="label label-success">成功標(biāo)簽</span>
<span class="label label-info">信息標(biāo)簽</span>
<span class="label label-warning">警告標(biāo)簽</span>
<span class="label label-danger">錯(cuò)誤標(biāo)簽</span>

標(biāo)簽

徽章

<span class="badge">3</span>

靠右對(duì)齊

<span class="badge pull-right">3</span>

徽章

其他控件

縮略圖

<a href="#" class="thumbnail">
    <img alt="100%x180" src="" style="height: 180px; width: 100%; display: block;" >
</a>

警示框
默認(rèn)

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">請(qǐng)輸入正確的密碼</div>
<div class="alert alert-warning" role="alert">您已操作失敗兩次，還有最后一次機(jī)會(huì)</div>
<div class="alert alert-danger" role="alert">對(duì)不起，您輸入的密碼有誤</div>

默認(rèn)

可關(guān)閉的警示框

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功！
</div>

可關(guān)閉

帶鏈接的警示框

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> 
    You successfully read 
    <a href="#" class="alert-link">this important alert message</a>
</div>

帶鏈接

進(jìn)度條

<h2>基本進(jìn)度條</h2>
<div class="progress">
     <div class="progress-bar" style="width:40%">
    </div>
</div> 
<h2>彩色進(jìn)度條</h2>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
<h2>條紋進(jìn)度條</h2>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<h2>動(dòng)態(tài)條紋進(jìn)度條</h2>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div> 
<h2>帶Label的進(jìn)度條</h2>
<h5>進(jìn)度條1</h5>
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  
</div>  
<h5>進(jìn)度條2</h5> 
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

進(jìn)度條

帶數(shù)字進(jìn)度條

媒體對(duì)象
列表組
面板
(見(jiàn)示例代碼)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Bootstrap

Bootstrap

導(dǎo)航

導(dǎo)航條

其他控件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Bootstrap

導(dǎo)航

導(dǎo)航條

其他控件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av