搜尋

首頁 >web前端 >js教程 >Bootstrap框架基礎解說

Bootstrap框架基礎解說

PHPz
PHPz原創
2018-02-06 09:25:055186瀏覽

本文主要為大家帶來一篇基於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>
<pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><p>Sample text here...</p>

还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

四、Bootstrap 表格

Bootstrap 支持的一些表格元素：

用于表格的样式

用于表格的行或者单元格

基本实例

为任意

标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

<table class="table">
 <caption>基本的表格布局</caption>
 <thead>
 <tr>
  <th>名称</th>
  <th>城市</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>Tanmay</td>
  <td>Bangalore</td>
 </tr>
 <tr>
  <td>Sachin</td>
  <td>Mumbai</td>
 </tr>
 </tbody>
</table>

条纹表格

通过添加 .table-striped class，您将在

内的行上看到条纹，如下面的实例所示：

<table class="table table-striped">
 <caption>条纹表格布局</caption>
 <thead>
 <tr>
  <th>名称</th>
  <th>城市</th>
  <th>邮编</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>Tanmay</td>
  <td>Bangalore</td>
  <td>560001</td>
 </tr>
 <tr>
  <td>Sachin</td>
  <td>Mumbai</td>
  <td>400003</td>
 </tr>
 <tr>
  <td>Uma</td>
  <td>Pune</td>
  <td>411027</td>
 </tr>
 </tbody>
</table>

带边框的表格

通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆角的，如下面的实例所示：

<table class="table table-bordered">
 <caption>边框表格布局</caption>
 <thead>
 <tr>
  <th>名称</th>
  <th>城市</th>
  <th>邮编</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>Tanmay</td>
  <td>Bangalore</td>
  <td>560001</td>
 </tr>
 <tr>
  <td>Sachin</td>
  <td>Mumbai</td>
  <td>400003</td>
 </tr>
 <tr>
  <td>Uma</td>
  <td>Pune</td>
  <td>411027</td>
 </tr>
 </tbody>
</table>

悬停表格

通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景，如下面的实例所示：

<table class="table table-hover">
 <caption>悬停表格布局</caption>
 <thead>
 <tr>
  <th>名称</th>
  <th>城市</th>
  <th>邮编</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>Tanmay</td>
  <td>Bangalore</td>
  <td>560001</td>
 </tr>
 <tr>
  <td>Sachin</td>
  <td>Mumbai</td>
  <td>400003</td>
 </tr>
 <tr>
  <td>Uma</td>
  <td>Pune</td>
  <td>411027</td>
 </tr>
 </tbody>
</table>

精简表格

通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<table class="table table-condensed">
 <caption>精简表格布局</caption>
 <thead>
 <tr>
  <th>名称</th>
  <th>城市</th>
  <th>邮编</th></tr>
 </thead>
 <tbody>
 <tr>
  <td>Tanmay</td>
  <td>Bangalore</td>
  <td>560001</td></tr>
 <tr>
  <td>Sachin</td>
  <td>Mumbai</td>
  <td>400003</td></tr>
 <tr>
  <td>Uma</td>
  <td>Pune</td>
  <td>411027</td></tr>
 </tbody>
</table>

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

<table class="table">
 <caption>上下文表格布局</caption>
 <thead>
 <tr>
  <th>产品</th>
  <th>付款日期</th>
  <th>状态</th></tr>
 </thead>
 <tbody>
 <tr class="active">
  <td>产品1</td>
  <td>23/11/2013</td>
  <td>待发货</td></tr>
 <tr class="success">
  <td>产品2</td>
  <td>10/11/2013</td>
  <td>发货中</td></tr>
 <tr class="warning">
  <td>产品3</td>
  <td>20/10/2013</td>
  <td>待确认</td></tr>
 <tr class="danger">
  <td>产品4</td>
  <td>20/10/2013</td>
  <td>已退货</td></tr>
 </tbody>
</table>

响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

<p class="table-responsive">
 <table class="table">
 <caption>响应式表格布局</caption>
 <thead>
  <tr>
  <th>产品</th>
  <th>付款日期</th>
  <th>状态</th></tr>
 </thead>
 <tbody>
  <tr>
  <td>产品1</td>
  <td>23/11/2013</td>
  <td>待发货</td></tr>
  <tr>
  <td>产品2</td>
  <td>10/11/2013</td>
  <td>发货中</td></tr>
  <tr>
  <td>产品3</td>
  <td>20/10/2013</td>
  <td>待确认</td></tr>
  <tr>
  <td>产品4</td>
  <td>20/10/2013</td>
  <td>已退货</td></tr>
 </tbody>
 </table>
</p>

五、Bootstrap 表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父
元素添加 role="form"。

把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。

向所有的文本元素 、