網路系統
bootstrap
允許將頁面劃分成共12個等寬邏輯單元，既允許單獨地使用這12個等分邏輯單元，也可以將其相鄰的列合併成乙個更寬的邏輯單元，甚至在乙個邏輯單元中再劃分12個子邏輯單元。如下圖所示：
網格用到的類樣式bootstrap的網路系統支援可響應式布局，當其列螢幕大小發生變化時則自動計算列寬。
共有4個：
xs (phones)
sm (tablets)
md (desktops)
lg (larger desktops)
下面是bootstrap網路的基本結構：
<
divclass="row"
>
<
divclass="col-*-*"
>
div>
div>
<
divclass="row"
>
<
divclass="col-*-*"
>
div>
<
divclass="col-*-*"
>
div>
<
divclass="col-*-*"
>
div>
div>
<
divclass="row"
>
div>
示例
下面的示例是bootstrap官方提供的基於bootstrap構造html面頁基本模板。
doctype
html>
<
html
lang="en"
>
<
head
>
<
title
>bootstrap example
title
>
<
meta
charset="utf-8"
>
<
meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<
link
rel="stylesheet"
href="css/bootstrap.min.css"
>
<
script
src="js/jquery.min.js"
>
script
>
<
script
src="js/bootstrap.min.js"
>
script
>
<
style
type="text/css"
>
div{
border-left:1px dotted blue
;border-bottom:1px dotted blue
;style
>
head
>
<
body
>
<
divclass="row"
>
<
divclass="col-sm-1"
>1
div>
<
divclass="col-sm-1"
>2
div>
<
divclass="col-sm-1"
>3
div>
<
divclass="col-sm-1"
>4
div>
<
divclass="col-sm-1"
>5
div>
<
divclass="col-sm-1"
>6
div>
<
divclass="col-sm-1"
>7
div>
<
divclass="col-sm-1"
>8
div>
<
divclass="col-sm-1"
>9
div>
<
divclass="col-sm-1"
>10
div>
<
divclass="col-sm-1"
>11
div>
<
divclass="col-sm-1"
>12
div>
div>
<
divclass="row"
>
<
divclass="col-sm-4"
>4-1
div>
<
divclass="col-sm-4"
>4-2
div>
<
divclass="col-sm-4"
>4-3
div>
div>
<
divclass="row"
>
<
divclass="col-sm-4"
>4
div>
<
divclass="col-sm-8"
>8
div>
div>
<
divclass="row"
>
<
divclass="col-sm-6"
>6-1
div>
<
divclass="col-sm-6"
>6-2
div>
div>
body
>
html
>
效果如下圖所示：
Bootstrap網格系統
bootstrap是乙個用於快速開發web應用程式和 的前端框架，它包括html,css,js等。它是由twitter開發，現在成為github上最為流行的前端開發框架。它提供了一套響應式，移動裝置優先的流式柵格系統，隨著螢幕或視窗尺寸增加，系統會自動分為最多12列。柵格系統用於通過一系列的行 ro...
bootstrap網格系統回顧
bootstrap 提供了一套響應式 移動裝置優先的流式網格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。什麼是網格 grid 在平面設計中，網格是一種由一系列用於組織內容的相交的直線 垂直的 水平的 組成的結構 通常是二維的 它廣泛應用於列印設計中的設計布局和內容結...
Bootstrap 網格系統布局
bootstrap提供了一套響應式 移動裝置優先的流式網格系統 grid system 隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。在平面設計中，網格是一種由一系列用於組織內容的相交的直線 垂直的 水平的 組成的結構 通常是二維的 它廣泛應用於列印設計中的設計布局和內容結...