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

BootStrap入門(mén)教程(三)之響應(yīng)式原理

 更新時(shí)間：2016年09月19日 15:26:26   投稿：mrr  
這篇文章主要介紹了BootStrap入門(mén)教程(三)之響應(yīng)式原理的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧

相關(guān)閱讀：

BootStrap入門(mén)教程(一)之可視化布局

BootStrap入門(mén)教程(二)之固定的內(nèi)置樣式

Bootstrap網(wǎng)格系統(tǒng)（Grid System）

　　響應(yīng)式網(wǎng)格系統(tǒng)隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

工作原理

　　· 行必須放置在 .container class 內(nèi)，以便獲得適當(dāng)?shù)膶?duì)齊（alignment）和內(nèi)邊距（padding）。

　　· 使用行來(lái)創(chuàng)建列的水平組。

　　· 內(nèi)容應(yīng)該放置在列內(nèi)，且唯有列可以是行的直接子元素。

　　· 預(yù)定義的網(wǎng)格類(lèi)，比如 .row 和 .col-xs-4，可用于快速創(chuàng)建網(wǎng)格布局。LESS 混合類(lèi)可用于更多語(yǔ)義布局。

　　· 列通過(guò)內(nèi)邊距（padding）來(lái)創(chuàng)建列內(nèi)容之間的間隙。該內(nèi)邊距是通過(guò) .rows 上的外邊距（margin）取負(fù)，表示第一列和最后一列的行偏移。

　　· 網(wǎng)格系統(tǒng)是通過(guò)指定您想要橫跨的十二個(gè)可用的列來(lái)創(chuàng)建的。例如，要?jiǎng)?chuàng)建三個(gè)相等的列，則使用三個(gè) .col-xs-4。

媒體查詢

/* 超小設(shè)備（手機(jī)，小于 768px） */
/* Bootstrap 中默認(rèn)情況下沒(méi)有媒體查詢 */
/* 小型設(shè)備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型設(shè)備（臺(tái)式電腦，992px 起） */ 
@media (min-width: @screen-md-min) { ... }
/* 大型設(shè)備（大臺(tái)式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

網(wǎng)格的基本結(jié)構(gòu)

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div> 
</div>
<div class="row">...</div>
</div>
<div class="container">....

示例一：水平堆疊

　　代碼如下：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 堆疊的水平</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6" style=" box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>
<div class="col-md-6" style="box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
</div>
</div>
</body>
</html>

　　效果：

　　確保單元的總數(shù)為12以保障顯示效果比較和諧。超過(guò)12就串行了。如果單個(gè)行的單元數(shù)超過(guò)12呢：

　　如上圖所示，單個(gè)行的單元數(shù)超過(guò)12會(huì)失去內(nèi)邊距。

示例二：中型和大型設(shè)備

　　睡得晚起得早還多夢(mèng)，也是沒(méi)治了。

　　中型設(shè)備是50%/50%，大型設(shè)備是33%/66%，那么可以這樣寫(xiě)：

<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>

　　源碼如下：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實(shí)例 - 中型和大型設(shè)備</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-6 col-lg-4" style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>
<div class="col-md-6 col-lg-8" style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>
<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>
</div>
</div>
</body>
</html>

　　若如此，中型設(shè)備的顯示是50%/50%：

　　大型設(shè)備的顯示是33%/66%：

　　同理移動(dòng)設(shè)備也可進(jìn)行類(lèi)似設(shè)置：

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

　　源碼及效果略。

響應(yīng)式的列重置

　　小設(shè)備時(shí)無(wú)法確定網(wǎng)格顯示的位置。

　　解決方法是添加一個(gè)響應(yīng)式的塊（描述未必準(zhǔn)確），使用.clearfix class和響應(yīng)式實(shí)用工具：

<div class="container">
<div class="row" >
<div class="col-xs-6 col-sm-3"
style="
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-xs-6 col-sm-3"
style="box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.
</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3"
style="
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-xs-6 col-sm-3"
style="box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim
</p>
</div>
</div>
</div>

　　解釋一下中間這句：

<div class="clearfix visible-xs"></div>

　　響應(yīng)式實(shí)用工具目前適用于塊和表切換?？聪旅鎯蓚€(gè)表格就知道了。

網(wǎng)格的基本結(jié)構(gòu)

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div> 
</div>
<div class="row">...</div>
</div>
<div class="container">....

實(shí)例三：響應(yīng)式實(shí)用工具

　　源碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bootstrap 實(shí)例 - 響應(yīng)式實(shí)用工具</title>
  <link rel="stylesheet" > 
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 40px;">
  <div class="row visible-on">
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-xs">特別小型</span>
      <span class="visible-xs">✔ 在特別小型設(shè)備上可見(jiàn)</span>
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-sm">小型</span>
      <span class="visible-sm">✔ 在小型設(shè)備上可見(jiàn)</span>
    </div>
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-md">中型</span>
      <span class="visible-md">✔ 在中型設(shè)備上可見(jiàn)</span>
    </div>
    <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
                       box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <span class="hidden-lg">大型</span>
      <span class="visible-lg">✔ 在大型設(shè)備上可見(jiàn)</span>
    </div>
  </div>
</div>
</body>
</html>

　　效果如下：

　　大型設(shè)備時(shí)：

　　其他設(shè)備略。

偏移列

　　.col-xs=*類(lèi)不支持偏移，可以通過(guò)使用一個(gè)空的單元格來(lái)實(shí)現(xiàn)該效果。

　　使用.col-md-offset-*類(lèi)可以把一個(gè)列的左外邊距增加*列，其中*的范圍是從1到11。

<div class="container">
  <h1>Hello, world!</h1>
  <div class="row" >
    <div class="col-xs-6 col-md-offset-3"
    style="box-shadow:
    inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing
      elit.
      </p>
    </div>
  </div>
</div>

　　效果：

嵌套列

　　嵌套需要添加一個(gè)新的.row，然后在這個(gè)嵌套的.row里添加一組.col-md-*列。這組列的個(gè)數(shù)不能超過(guò)12。

<div class="container">
  <h1>Hello, world!</h1>
  <div class="row">
    <div class="col-md-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>第一列</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
    <div class="col-md-9" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
      <h4>第二列 - 分為四個(gè)盒子</h4>
      <div class="row">
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            Consectetur art party Tonx culpa semiotics. Pinterest
    assumenda minim organic quis.
          </p>
        </div>
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
             sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.
          </p>
        </div>
        <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

　　效果：

列排序

　　有一點(diǎn)像定位。.col-md-push-*相當(dāng)于left；.col-md-pull-*類(lèi)似于right。其中*的范圍是從1到11。標(biāo)簽在后面的層級(jí)高一些。

<div class="container">
  <h1>Hello, world!</h1>
  <div class="row">
   <p>排序前</p>
   <div class="col-md-4" style="
     box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
     我在左邊
   </div>
   <div class="col-md-8" style="
     box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
     我在右邊
   </div>
  </div><br>
  <div class="row">
   <p>排序后</p>
   <div class="col-md-4 col-md-push-1"
     style="
     box-shadow: inset 1px -1px 1px #444,
     inset -1px 1px 1px #444;">
     我在左邊
   </div>
   <div class="col-md-8 col-md-pull-2"
     style="
     box-shadow: inset 1px -1px 1px #444,
     inset -1px 1px 1px #444;">
     我在右邊
   </div>
  </div>
</div>

　　效果：

 　　參考：http://www.runoob.com/bootstrap/bootstrap-grid-system.html

以上所述是小編給大家介紹的BootStrap入門(mén)教程(三)之響應(yīng)式原理，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論