本文主要為大家帶來一篇基於Bootstrap框架菜鳥入門教學(推薦)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望大家能對boostrap有一個更清楚的認識。
Bootstrap菜鳥入門教學
#Bootstrap簡介
Bootstrap，來自Twitter，是目前最受歡迎的前端框架。 Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更快速。
【相關影片推薦：Bootstrap教學】
一、柵格系統
柵格系統的工作原理：
「行（row）」必須包含在.container （固定寬度）或.container-fluid （100% 寬度）中，以便為其賦予適當的排列（aligment）和內補（padding）。
透過「行（row）」在水平方向建立一組「列（column）」。
你的內容應放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。
類似.row和.col-xs-4 這種預先定義的類，可以用來快速建立柵格佈局。 column）”設定padding 屬性，從而創建列與列之間的間隔（gutter）。透過為.row 元素設定負值margin 從而抵消掉為.container 元素設定的padding，也間接為“行（row）”所包含的「列（column）」抵消掉了padding。
柵格系統中的欄位是透過指定1到12的值來表示其跨越的範圍。 #如果一「行（row）」中包含了的「列（column）」大於12，多餘的「列（column）」所在的元素將會被當作一個整體另起一行排列。格類適用於與螢幕寬度大於或等於分界點大小的設備， 並且針對小螢幕設備覆蓋柵格類別。分界點大小的設備， 並且針對小螢幕設備覆蓋柵格類別。
媒體查詢是非常別緻的"有條件的CSS 規則"。媒體查詢可讓您基於視窗大小移動、顯示並隱藏內容。會在媒體查詢程式碼中包含max-width，從而將CSS 的影響限制在更小範圍的螢幕大小之內。規則。則會進行一些處理。
柵格參數
下表可以詳細查看 Bootstrap 的柵格系統是如何在多種螢幕裝置上運作的。
下表總結了Bootstrap 網格系統如何跨多個裝置工作：
響應式的列重置
以下實例包含了4個網格，但是我們在小裝置瀏覽時無法確定網格顯示的位置。
為了解決這個問題，可以使用.clearfix class和響應式工具來解決，如下面實例所示：
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }登入後複製
偏移列
偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs-* 類別不支援偏移，但是它們可以簡單地透過使用一個空的單元格來實現該效果。
為了在大螢幕顯示器上使用偏移，請使用 .col-md-offset-* 類別。這些類別會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。
在下面的實例中，我們有
..
，我們將使用.col-md-offset-3 class 來居中這個p。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }登入後複製
巢狀列
#
为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。
在下面的实例中，布局有两个列，第二列被分为两行四个盒子。
<p class="container">
<h1>Hello, world!</h1>
<p class="row">
<p class="col-md-3" >
<h4>第一列</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</p>
<p class="col-md-9" >
<h4>第二列 - 分为四个盒子</h4>
<p class="row">
<p class="col-md-6" >
<p>
Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</p>
<p class="col-md-6" >
<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>
</p>
</p>
<p class="row">
<p class="col-md-6" >
<p>
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</p>
<p class="col-md-6" >
<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>
</p>
</p>
</p>
</p>
</p>
登入後複製
列排序
Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。
在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。
<p class="container">
<h1>Hello, world!</h1>
<p class="row">
<p>
排序前
</p>
<p class="col-md-4" >
我在左边
</p>
<p class="col-md-8" >
我在右边
</p>
</p>
<br>
<p class="row">
<p>
排序后
</p>
<p class="col-md-4 col-md-push-8" >
我在左边
</p>
<p class="col-md-8 col-md-pull-4" >
我在右边
</p>
</p>
</p>
登入後複製
二、Bootstrap 排版
HTML 中的所有标题标签，
到 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
登入後複製
在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。
如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 ，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本，如下面实例所示：
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
登入後複製
页面主体：Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予
元素和所有段落元素。另外，
（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>
登入後複製
列表：
Bootstrap 支持有序列表、无序列表和定义列表。
有序列表：有序列表是指以数字或其他有序字符开头的列表。
无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
定义列表：在这种类型的列表中，每个列表项可以包含
和 元素。 代表 定义术语，就像字典，这是被定义的属于（或短语）。接着， 是 的描述。您可以使用 class dl-horizontal 把 行中的属于与描述并排显示。
下面的实例演示了这些类型的列表：
<h4>有序列表</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
登入後複製
下表提供了 Bootstrap 更多排版类的实例：
三、Bootstrap 代码
Bootstrap 允许您以两种方式显示代码：
第一种是 标签。如果您想要内联显示代码，那么您应该使用 标签。
For example, <code><section></code> should be wrapped as inline.
登入後複製
第二种是
标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre class="brush:php;toolbar:false"> 标签。</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><p>Sample text here...</p>
登入後複製
