App下載

Bootstrap響應(yīng)式布局原理分享!

猿友 2021-07-05 15:14:48 瀏覽數(shù) (3105)
反饋

在前段開發(fā)中,我們都可以了解到什么是Bootstrap,那么今天我們就來說說有關(guān)于 Bootstrap響應(yīng)式布局原理這個(gè)問題吧!下面是小編整理的相關(guān)內(nèi)容,希望對大家的學(xué)習(xí)和了解有所幫助。 

首先我們需要了解這個(gè)框架的實(shí)現(xiàn)原理,它是通過定義容器大小來平分的,然后在通過對內(nèi)外邊距,之后在通過我們的媒體查詢就可以里,這樣我們就完成了個(gè)強(qiáng)大的響應(yīng)性網(wǎng)格系統(tǒng)。


一、柵格系統(tǒng)的工作原理:

1、在這個(gè)系統(tǒng)中我們的?行(row)?必須包含在我們的?固定寬(.container)?或者滿屏寬度即寬度達(dá)到100%,這樣可以方便我們?yōu)槠涮砑雍线m的?排列(aligment)?和?內(nèi)補(bǔ)(padding)?。

2、通過?行(row)?的特點(diǎn)我們可以在水平方向創(chuàng)建一組?列(column)?。

3、我們在使用的時(shí)候內(nèi)容需要放置在?列(column)?中,而且只有?列(column)?才可以作為我們?行(row)?的直接子元素。

4、對于 ?.row?和?col-xs-4?這種類的話我們是可以用來快速創(chuàng)建柵格布局的,不僅如此在?bootstrap?源碼中定義的mixin也可以用來創(chuàng)建語義化布局。

5、在這是用這個(gè)布局的時(shí)候我們還可以通過設(shè)置?padding?屬性。從而創(chuàng)建列和列之間的?間隔(gutter)?,然后再通過?.rowd?的元素設(shè)置負(fù)值從而來抵消?.container?元素設(shè)置的?padding?,這個(gè)方法也就間接的為?行(row)?所包含的?列(column)?抵消掉?padding?。

6、如果這個(gè)系統(tǒng)的列是指定1到12的值從而來表示跨越范圍。

7、系統(tǒng)中如果我們在進(jìn)行設(shè)置的時(shí)候,如果一?行(row)?中包含了的?列(column)?大于12,多余的列所在的元素將作為一個(gè)整體另起一行排列。

8、適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備截圖如下所示: 

手機(jī)設(shè)配寬度


二、使用Bootstrap響應(yīng)式布局

首先我們在新的頁面中添加下面這些代碼,如下所示:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

我們通過代碼中可以知道,我們在?mate?標(biāo)簽中添加?viewpirt?屬性,?content?中寬度等于設(shè)備寬度,? initial-scale:?頁面首次被顯示可見區(qū)域的縮放級別,取值1則頁面按實(shí)際尺寸顯示,無任何縮放;?maximum-scale:?允許用戶縮放到的最小比例;?user-scalable:?用戶是否可以手動(dòng)縮放。

我們根據(jù)這個(gè)系統(tǒng)來看下面的代碼和運(yùn)行結(jié)果:

<div class="container-fluid login">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
      <form class="form-horizontal loginForm">
        <h3 class="form-signin-heading">用戶登錄</h3>
        <div class="form-group">
          <label for="email" class="col-sm-2 col-xs-3 control-label">郵箱</label>
          <div class="col-sm-8 col-xs-8">
            <input type="text" class="form-control" name="email" placeholder="請輸入郵箱">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 col-xs-3 control-label">密碼</label>
          <div class="col-sm-8 col-xs-8">
            <input type="password" class="form-control" name="password" placeholder="請輸入密碼">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-4 col-xs-4 ">
            <div class="checkbox">
              <label>
                <input type="checkbox">記住我 </label>
            </div>
          </div>
          <div class="col-sm-4 col-xs-4 control-label" >
            <a href="resetPwd.html" id="forget">忘記密碼?</a>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-12 col-lg-12">
            <button type="button" class="btn btn-primary btn-block" id="submit">登錄</button>
          </div>
        </div>
      </form>
    </div>
  </div>

運(yùn)行截圖:

Bootstrap響應(yīng)式布局PC端運(yùn)行截圖:

Bootstrap響應(yīng)式布局運(yùn)行截圖PC端

Bootstrap響應(yīng)式布局手機(jī)端運(yùn)行截圖:

Bootstrap響應(yīng)式布局運(yùn)行截圖手機(jī)端截圖


總結(jié):

以上就是有關(guān)于“ Bootstrap響應(yīng)式布局原理分享! ”的相關(guān)內(nèi)容,如果你有不同看法也可以提出來和大家一同解決,更多有關(guān)于bootstrap中的相關(guān)內(nèi)容和知識(shí)我們都可以在W3cschool中學(xué)習(xí)和了解!


0 人點(diǎn)贊