欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap整體框架之CSS12柵格系統(tǒng)

 更新時(shí)間：2016年12月15日 13:32:37   作者：github_34514750  
這篇文章主要介紹了Bootstrap整體框架之CSS12柵格系統(tǒng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1.整體架構(gòu)

BootStrap框架公共六個(gè)部分：(css組件和js插件是其表現(xiàn)形式，其余的是基礎(chǔ)支撐平臺(tái))

表現(xiàn)形式
CSS組件
JS插件
基礎(chǔ)支撐平臺(tái)
CSS12柵格系統(tǒng)
基礎(chǔ)布局組件
jQuery
響應(yīng)式設(shè)計(jì)

1.1 CSS12柵格系統(tǒng)

12柵格系統(tǒng)是BootStrap的核心功能，也是響應(yīng)式設(shè)計(jì)核心理念的一個(gè)實(shí)現(xiàn)方式。

1.1.1 實(shí)現(xiàn)原理

柵格布局原理：定義容器大小，平分12分，在調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢(xún)，制作出強(qiáng)大響應(yīng)式的柵格系統(tǒng)。

1.最外層的邊框，伴隨著響應(yīng)式思想，區(qū)分了四種類(lèi)型瀏覽器，像素分界點(diǎn)768px、992px、1200px
2.第二層的邊框，即.container樣式容器，針對(duì)四種瀏覽器寬度不一樣，值是自動(dòng)、750px、970px、1170px

//源碼
  .container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
  }
  @media (min-width: 768px) {
   .container {
    width: 750px;
   }
  }
  @media (min-width: 992px) {
   .container {
    width: 970px;
   }
  }
  @media (min-width: 1200px) {
   .container {
    width: 1170px;
   }
  }

3.1號(hào)橫條，左內(nèi)邊距和右內(nèi)邊距是15px，是12個(gè)col-lg-1，沒(méi)有row，則會(huì)

//源碼
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
  }



 <!DOCTYPE html>
  <html lang="en">
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap從3.0版本開(kāi)始全面支持移動(dòng)平臺(tái)，貫徹移動(dòng)先行宗旨 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

   </head>
   <body>
    <div class="container" style="border:1px solid black">
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
    </div>
    <!-- bootstrap是基于jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
   </body>
  </html>

4.2號(hào)橫條，也就是row容器的定義,margin-left和margin-right都是-15px，組合row和列后，形成3號(hào)橫條的效果，也就是左右寬度用滿(mǎn)的效果。

//源碼 
.row { 
margin-right: -15px; 
margin-left: -15px; 
}

有row，則會(huì)沒(méi)邊距

 <!DOCTYPE html>
  <html lang="en">
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap從3.0版本開(kāi)始全面支持移動(dòng)平臺(tái)，貫徹移動(dòng)先行宗旨 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

   </head>
   <body>
    <div class="container" style="border:1px solid black">
      <div class="row">
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1">col-lg-1</div>
        <div class="col-lg-1" style="border:1px solid black">col-lg-1</div>
      </div>
    </div>
    <!-- bootstrap是基于jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
   </body>
  </html>

1.1.2 基本用法

1.列組合

<div class="container" style="border:1px solid black">
  <div class="row">
    <div class="col-lg-8" style="border:1px solid black">col-lg-8</div>
    <div class="col-lg-4" style="border:1px solid black">col-lg-4</div>
  </div>
  <div class="row">
    <div class="col-lg-6" style="border:1px solid black">col-lg-6</div>
    <div class="col-lg-6" style="border:1px solid black">col-lg-6</div>
  </div>
</div>

實(shí)現(xiàn)很簡(jiǎn)單，就是涉及了兩個(gè)CSS特性：左浮動(dòng)和寬度百分比

//源碼
@media (min-width: 1200px) {
 .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  float: left;
 }
 .col-lg-12 {
  width: 100%;
 }
 .col-lg-11 {
  width: 91.66666667%;
 }
 .col-lg-10 {
  width: 83.33333333%;
 }
 .col-lg-9 {
  width: 75%;
 }
 .col-lg-8 {
  width: 66.66666667%;
 }
 .col-lg-7 {
  width: 58.33333333%;
 }
 .col-lg-6 {
  width: 50%;
 }
 .col-lg-5 {
  width: 41.66666667%;
 }
 .col-lg-4 {
  width: 33.33333333%;
 }
 .col-lg-3 {
  width: 25%;
 }
 .col-lg-2 {
  width: 16.66666667%;
 }
 .col-lg-1 {
  width: 8.33333333%;
 }
}

2.列偏移

我們不想讓相鄰的列挨在一起，則利用柵格系統(tǒng)的列偏移.col-xs(sm,md,lg)-offset-* 功能來(lái)實(shí)現(xiàn)，不必再定義margin

<div class="row">
  <div class="col-lg-8 col-lg-offset-2" style="border:1px solid black">col-lg-8 col-lg-offset-2</div>
  <div class="col-lg-2 col-lg-offset-2" style="border:1px solid black">col-lg-2 col-lg-offset-2</div>
</div>


//源碼
.col-lg-offset-12 {
 margin-left: 100%;
}
.col-lg-offset-11 {
 margin-left: 91.66666667%;
}
.col-lg-offset-10 {
 margin-left: 83.33333333%;
}
.col-lg-offset-9 {
 margin-left: 75%;
}
.col-lg-offset-8 {
 margin-left: 66.66666667%;
}
.col-lg-offset-7 {
 margin-left: 58.33333333%;
}
.col-lg-offset-6 {
 margin-left: 50%;
}
.col-lg-offset-5 {
 margin-left: 41.66666667%;
}
.col-lg-offset-4 {
 margin-left: 33.33333333%;
}
.col-lg-offset-3 {
 margin-left: 25%;
}
.col-lg-offset-2 {
 margin-left: 16.66666667%;
}
.col-lg-offset-1 {
 margin-left: 8.33333333%;
}
.col-lg-offset-0 {
 margin-left: 0;
}

3.列嵌套

柵格系統(tǒng)也支持列嵌套，也就是一個(gè)列中可以在聲明一個(gè)或者多個(gè)行.內(nèi)部嵌套的row寬度是100%，就是當(dāng)前外部列的寬度

<div class="row">
  <div class="col-lg-8" style="border:1px solid black">col-lg-8</div>
  <div class="col-lg-4" style="border:1px solid black">
    <div class="row">
      <div class="col-lg-6">col-lg-6</div>
      <div class="col-lg-6">col-lg-6</div>
    </div>
  </div>
</div>

4.列排序

列排序就是改變列的方向，也就是改變左右浮動(dòng)，并且設(shè)置浮動(dòng)的距離。可以通過(guò).col-xs(sm,md,lg)-pull(push)-*
所有列設(shè)置的都是左浮動(dòng)，通過(guò)設(shè)置left和right來(lái)實(shí)現(xiàn)定位顯示。push則設(shè)置left，pull則設(shè)置right

其實(shí)只是利用了float，left，right三個(gè)屬性就實(shí)現(xiàn)了這種效果 

//源碼
.col-lg-pull-12 {
 right: 100%;
}
.col-lg-pull-11 {
 right: 91.66666667%;
}
.col-lg-pull-10 {
 right: 83.33333333%;
}
.col-lg-pull-9 {
 right: 75%;
}
.col-lg-pull-8 {
 right: 66.66666667%;
}
.col-lg-pull-7 {
 right: 58.33333333%;
}
.col-lg-pull-6 {
 right: 50%;
}
.col-lg-pull-5 {
 right: 41.66666667%;
}
.col-lg-pull-4 {
 right: 33.33333333%;
}
.col-lg-pull-3 {
 right: 25%;
}
.col-lg-pull-2 {
 right: 16.66666667%;
}
.col-lg-pull-1 {
 right: 8.33333333%;
}
.col-lg-pull-0 {
 right: auto;
}
.col-lg-push-12 {
 left: 100%;
}
.col-lg-push-11 {
 left: 91.66666667%;
}
.col-lg-push-10 {
 left: 83.33333333%;
}
.col-lg-push-9 {
 left: 75%;
}
.col-lg-push-8 {
 left: 66.66666667%;
}
.col-lg-push-7 {
 left: 58.33333333%;
}
.col-lg-push-6 {
 left: 50%;
}
.col-lg-push-5 {
 left: 41.66666667%;
}
.col-lg-push-4 {
 left: 33.33333333%;
}
.col-lg-push-3 {
 left: 25%;
}
.col-lg-push-2 {
 left: 16.66666667%;
}
.col-lg-push-1 {
 left: 8.33333333%;
}
.col-lg-push-0 {
 left: auto;
}

1.1.3 響應(yīng)式柵格

已知col-xs-* col-sm-* col-md-* col-lg-*

1.跨設(shè)備組合定義
一種樣式（比如col-md-9）在其定義的尺寸范圍以外是不起作用的，比如，在小型或者大型屏幕上，所有帶有md的樣式都不會(huì)生效。我們可以在一個(gè)元素上應(yīng)用不同的樣式，以適配不同尺寸的屏幕。

<div class="container" style="border:1px solid black">
  <div class="row">
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div1 col-xs-6 col-sm-3 qwerwrgwefhsdgfsdfg</div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div2 col-xs-6 col-sm-3</div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div3 col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div4 col-xs-6 col-sm-3</div>
  </div>
</div>

如圖，由于div3換行時(shí)，但div1過(guò)高，則div3就右邊緊挨著顯示了。
所以需要利用clearfix樣式清除浮動(dòng)，但前提是在超小型屏幕上才顯示(用visible-xs控制)

<div class="container" style="border:1px solid black">
  <div class="row">
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div1 col-xs-6 col-sm-3 qwerwrgwefhsdgfsdfg</div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div2 col-xs-6 col-sm-3</div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div3 col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3" style="border:1px solid black"> div4 col-xs-6 col-sm-3</div>
  </div>
</div>

//源代碼
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
 display: table;
 content: " ";
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-header:after,
.modal-footer:after {
 clear: both;
}
//源代碼
@media (max-width: 767px) {
 .visible-xs {
  display: block !important;
 }
 table.visible-xs {
  display: table !important;
 }
 tr.visible-xs {
  display: table-row !important;
 }
 th.visible-xs,
 td.visible-xs {
  display: table-cell !important;
 }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用canvas實(shí)現(xiàn)有趣的彈簧效果

    使用canvas實(shí)現(xiàn)有趣的彈簧效果

    這篇文章主要為大家詳細(xì)介紹了如何使用canvas實(shí)現(xiàn)有趣的彈簧效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下
    2023-12-12
  • js在輸入框屏蔽按鍵,只能鍵入數(shù)字的示例代碼

    js在輸入框屏蔽按鍵,只能鍵入數(shù)字的示例代碼

    本篇文章主要介紹了js在輸入框屏蔽按鍵,只能鍵入數(shù)字的示例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2014-01-01
  • Chrome Form多次提交表單問(wèn)題的解決方法

    Chrome Form多次提交表單問(wèn)題的解決方法

    第一次提交可以，第二次提交就沒(méi)有任何響應(yīng)了。需要重新加載頁(yè)面后才可以提交，而這個(gè)問(wèn)題在Firefox,IE下沒(méi)有出現(xiàn)。
    2011-05-05
  • 取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法

    取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法

    今天小編就為大家分享一篇取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • 加速I(mǎi)E的Javascript document輸出的方法

    加速I(mǎi)E的Javascript document輸出的方法

    加入這樣的一行代碼IE的document的訪(fǎng)問(wèn)速度至少可以提高5倍以上，對(duì)于頁(yè)面使用document的朋友絕對(duì)是個(gè)好方法。
    2010-12-12
  • D3.js實(shí)現(xiàn)文本的換行詳解

    D3.js實(shí)現(xiàn)文本的換行詳解

    相信大家都知道在SVG中添加文本是使用text元素。但這個(gè)元素不能夠自動(dòng)換行，超出的部分就顯示不出來(lái)了，怎么辦呢？下面通過(guò)這篇文章來(lái)給大家詳細(xì)介紹下實(shí)現(xiàn)的過(guò)程。
    2016-10-10
  • javascript常用函數(shù)（2）

    javascript常用函數(shù)（2）

    這篇文章主要介紹了javascript常用函數(shù)，再來(lái)15個(gè)常用函數(shù)，都具有很高的實(shí)用性，感興趣的小伙伴們可以參考一下
    2015-11-11
  • JavaScript?讀取及寫(xiě)入本地文件的操作方法

    JavaScript?讀取及寫(xiě)入本地文件的操作方法

    文章介紹了在純前端JavaScript中如何讀取和寫(xiě)入本地文件,瀏覽器環(huán)境限制了直接訪(fǎng)問(wèn)文件系統(tǒng),但提供了文件上傳和下載功能,對(duì)于文件讀取,可以使用FileReader?API,支持分片讀取和流式處理,感興趣的朋友一起看看吧
    2025-03-03
  • JSQL 批量圖片切換的實(shí)現(xiàn)代碼

    JSQL 批量圖片切換的實(shí)現(xiàn)代碼

    其實(shí)這個(gè)example也很簡(jiǎn)單， 就是根據(jù)where后的條件批量修改element的屬性，此處為Img元素
    2010-05-05
  • js 觸發(fā)select onchange事件代碼

    js 觸發(fā)select onchange事件代碼

    select 或text的onchange事件需要手動(dòng)（通過(guò)鍵盤(pán)輸入）改變select或text的值才能觸發(fā)，本文為大家介紹下使用js觸發(fā)select onchange事件
    2014-03-03

最新評(píng)論