首頁

web前端

js教程

Bootstrap框架基礎解說

PHPz

Feb 06, 2018 am 09:25 AM

bootstrap框架講解

本文主要為大家帶來一篇基於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>
 </p><h1 id="Hello-world">Hello, world!</h1>
 <p>
  </p><p>
   </p><h4 id="第一列">第一列</h4>
   <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
   </p>
  
  <p>
   </p><h4 id="第二列-分为四个盒子">第二列 - 分为四个盒子</h4>
   <p>
    </p><p>
     </p><p>
      Consectetur art party Tonx culpa semiotics. Pinterest 
  assumenda minim organic quis.
     </p>
    
    <p>
     </p><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>
     </p><p>
      quis nostrud exercitation ullamco laboris nisi ut 
  aliquip ex ea commodo consequat.
     </p>
    
    <p>
     </p><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>

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

<p>
 </p><h1 id="Hello-world">Hello, world!</h1>
 <p>
  </p><p>
   排序前
  </p>
  <p>
   我在左边
  </p>
  <p>
   我在右边
  </p>
 
 <br>
 <p>
  </p><p>
   排序后
  </p>
  <p>
   我在左边
  </p>
  <p>
   我在右边
  </p>

二、Bootstrap 排版

HTML 中的所有标题标签，

到

均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<h1>我是标题1 h1</h1>
<h2 id="我是标题-h">我是标题2 h2</h2>
<h3 id="我是标题-h">我是标题3 h3</h3>
<h4 id="我是标题-h">我是标题4 h4</h4>
<h5 id="我是标题-h">我是标题5 h5</h5>
<h6 id="我是标题-h">我是标题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 id="引导主体副本">引导主体副本</h2>
<p>这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

列表：

Bootstrap 支持有序列表、无序列表和定义列表。

有序列表：有序列表是指以数字或其他有序字符开头的列表。

无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。

定义列表：在这种类型的列表中，每个列表项可以包含

和

元素。

代表定义术语，就像字典，这是被定义的属于（或短语）。接着，

是

的描述。您可以使用 class dl-horizontal 把

行中的属于与描述并排显示。

下面的实例演示了这些类型的列表：

<h4 id="有序列表">有序列表</h4>
<ol>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
</ol>
<h4 id="无序列表">无序列表</h4>

Item 1
Item 2
Item 3
Item 4

未定义样式列表

Item 1
Item 2
Item 3
Item 4

内联列表

Item 1
Item 2
Item 3
Item 4

定义列表

Description 1: Item 1
Description 2: Item 2

水平的定义列表

Description 1: Item 1
Description 2: Item 2

下表提供了 Bootstrap 更多排版类的实例：

三、Bootstrap 代码

Bootstrap 允许您以两种方式显示代码：

第一种是 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。

For example, <code><section></section></code> should be wrapped as inline.

第二种是

 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre class="brush:php;toolbar:false"> 标签。<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）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

基本的表格布局
名称	城市
Tanmay	Bangalore
Sachin	Mumbai

条纹表格

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

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

条纹表格布局
名称	城市	邮编
Tanmay	Bangalore	560001
Sachin	Mumbai	400003
Uma	Pune	411027

带边框的表格

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

边框表格布局
名称	城市	邮编
Tanmay	Bangalore	560001
Sachin	Mumbai	400003
Uma	Pune	411027

悬停表格

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

悬停表格布局
名称	城市	邮编
Tanmay	Bangalore	560001
Sachin	Mumbai	400003
Uma	Pune	411027

精简表格

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

精简表格布局
名称	城市	邮编
Tanmay	Bangalore	560001
Sachin	Mumbai	400003
Uma	Pune	411027

上下文类

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

上下文表格布局
产品	付款日期	状态
产品1	23/11/2013	待发货
产品2	10/11/2013	发货中
产品3	20/10/2013	待确认
产品4	20/10/2013	已退货

响应式表格

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

<p>
 </p>

响应式表格布局
产品	付款日期	状态
产品1	23/11/2013	待发货
产品2	10/11/2013	发货中
产品3	20/10/2013	待确认
产品4	20/10/2013	已退货

五、Bootstrap 表单

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

向父

元素添加 role="form"。

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

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

向所有的文本元素、和 <select> 添加 class ="form-control" 。</select>

内联表单

为

元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

向父

元素添加 class .form-horizontal。

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

中。

向标签添加 class .control-label。

六、Bootstrap 按钮

可作为按钮使用的标签或元素

为、

以下样式可用于,

<!-- 标准的按钮 -->
<button>默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button>原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button>成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button>信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button>警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button>危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button>链接按钮</button>

按钮大小

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

下表列出了获得各种大小按钮的 class：

<p>
 <button>大的原始按钮</button>
 <button>大的按钮</button>
</p>
<p>
 <button>默认大小的原始按钮</button>
 <button>默认大小的按钮</button>
</p>
<p>
 <button>小的原始按钮</button>
 <button>小的按钮</button>
</p>
<p>
 <button>特别小的原始按钮</button>
 <button>特别小的按钮</button>
</p>
<p>
 <button>块级的原始按钮</button>
 <button>块级的按钮</button>
</p>

按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

禁用状态

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

按钮标签

您可以在、

下面的实例演示了这点：

<a>链接</a>
<button>按钮</button>
<input>
<input>

七、Bootstrap 图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center

<img  class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="cinqueterre.jpg" alt="Bootstrap框架基礎解說" >

图片形状

通过为 Bootstrap框架基礎解說元素添加以下相应的类，可以让图片呈现不同的形状。

<img  class="img-rounded lazy" src="/static/imghwm/default1.png" data-src="..." alt="Bootstrap框架基礎解說" >
<img  class="img-circle lazy" src="/static/imghwm/default1.png" data-src="..." alt="Bootstrap框架基礎解說" >
<img  class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="..." alt="Bootstrap框架基礎解說" >

八、Bootstrap 辅助类

文本

以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：

背景

以下不同的类展示了不同的背景颜色。如果文本是个链接鼠标移动到文本上会变暗：

其他

一些实例：

关闭图标

使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。

<p>关闭图标实例
 <button>
 ×
 </button>
</p>

三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。

<span></span>

让内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。

<p>...</p>

// Class
.center-block {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

// Usage as a mixin
.element {
 .center-block();
}

显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。

.hide 类仍然可用，但是它不能对屏幕阅读器起作用，并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden 或 .sr-only 。

另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。

<p>...</p>
<p>...</p>

// Classes
.show {
 display: block !important;
}
.hidden {
 display: none !important;
}
.invisible {
 visibility: hidden;
}

// Usage as mixins
.element {
 .show();
}
.another-element {
 .hidden();
}

九、Bootstrap 响应式实用工具

Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。

需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。