BootStrap網格佈局

時間 2019-11-19

原文原文鏈接

　　如何使用BootStrap樣式

　　BootStrap與其餘的開源庫相似，直接引用它的css樣式文件就能夠使用了。css

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

　　在代碼中，直接使用class就能夠使用其定義的樣式，例如使用它button樣式，就能夠按照下面的方式：html

<button class="btn btn-primary" type="button">Reset</button>

　　什麼是網格佈局

　　目前流行的響應式佈局，在顯示界面設定了集中寬度，當寬度知足必定的標準時，就是用當前寬度支持下的樣式。bootstrap

　　這樣就能夠使一種開發，支持移動端、以及各類分辨率的顯示器，達到良好的使用效果。佈局

　　BootStrap把網頁分紅12個網格，並有下面四中寬度：自動、750px、970px和1170pxspa

　　當屏幕屬於其中某個區間時，自動使用對應的樣式。code

　　使用的基本語法，相似下面：container---->row---->columncdn

<div class="container">
<div class="row"></div>
</div>

　　提供個簡單的樣例：htm

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基本用法</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<div class="container">
  <div class="row">
    <button class="btn btn-primary col-md-4" type="button">test</button>
    <button class="btn btn-primary col-md-8" type="button">test</button>
  </div>
  <div class="row">
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
  </div>
  <div class="row">
    <button class="btn btn-primary col-md-3" type="button">test</button>
    <button class="btn btn-primary col-md-6" type="button">test</button>
    <button class="btn btn-primary col-md-3" type="button">test</button>
  </div>
</div>
</body>
</html>

　　主要要知足網格數目不超過12個，超過的部分會自動擠到下一列！blog

　　樣式運行效果分別以下：utf-8

　　最大的寬度下：

　　中等寬度下：

　　最小寬度下：

　　網格列偏移

　　BootStrap中支持網格的列偏移：直接在樣式中col-md-offset-*就能夠達到偏移效果。

　　例以下面的代碼：

<div class="container">
  <div class="row">
    <button class="btn btn-primary col-md-4" type="button">test</button>
    <button class="btn btn-primary col-md-4 col-md-offset-4" type="button">test</button>
  </div>
  <div class="row">
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
  </div>
</div>

　　第一行的第二個button就達到了列偏移4個網格的效果：

　　網格嵌套

　　在BootStrap中也支持網格的嵌套，一樣也須要嵌套中的網格知足12格的劃分原則

<div class="container">
  <div class="row">
    <button class="btn btn-primary col-md-4" type="button">test</button>
    <div class="col-md-8">
        <div class="row">
            <button class="btn btn-info col-md-4" type="button">test</button>
            <button class="btn btn-info col-md-4" type="button">test</button>
            <button class="btn btn-info col-md-4" type="button">test</button>
          </div>
    </div>
  </div>
  <div class="row">
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
    <button class="btn btn-info col-md-4" type="button">test</button>
  </div>
</div>

　　效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。