前端基礎之 Bootstrap框架

本文轉載自查看原文 2018-03-29 14:41 1291 前端

瀏覽目錄

Bootstrap介紹
為什么要使用Bootstrap?
Bootstrap環境搭建
布局容器
柵格系統
Bootstrap全局樣式

一、Bootstrap介紹

Bootstrap是Twitter開源的基於HTML、CSS、JavaScript的前端框架。

它是為實現快速開發Web應用程序而設計的一套前端工具包。

它支持響應式布局，並且在V3版本之后堅持移動設備優先。

二、為什么要使用Bootstrap?

在Bootstrap出現之前：

命名：重復、復雜、無意義（想個名字費勁）

樣式：重復、冗余、不規范、不和諧

頁面：錯亂、不規范、不和諧

在使用Bootstrap之后：各種命名都統一並且規范化。頁面風格統一，畫面和諧。

三、Bootstrap環境搭建

1、下載

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

我們使用V3版本的Bootstrap，我們下載的是用於生產環境的Bootstrap。

2、環境搭建

目錄結構：

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主題樣式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主題相關樣式壓縮文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS樣式壓縮文件
│   └── bootstrap.min.css.map
├── fonts  // 字體文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS壓縮文件
    └── npm.js

處理依賴

由於Bootstrap的某些組件依賴於jQuery，所以請確保下載對應版本的jQuery文件，來保證Bootstrap相關組件運行正常。

四、布局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意，由於 padding 等屬性的原因，這兩種容器類不能互相嵌套。

.container 類用於固定寬度並支持響應式布局的容器。

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

.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

五、柵格系統

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的 mixin用於生成更具語義的布局。

簡介：柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。

工作原理

“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
通過“行（row）”在水平方向創建一組“列（column）”。
你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
如果一“行（row）”中包含了的“列（column）”大於 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。
柵格類適用於與屏幕寬度大於或等於分界點大小的設備，並且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何 .col-md-*柵格類適用於與屏幕寬度大於或等於分界點大小的設備，並且針對小屏幕設備覆蓋柵格類。因此，在元素上應用任何 .col-lg-*不存在，也影響大屏幕設備。

媒體查詢

在柵格系統中，我們在 Less 文件中使用以下媒體查詢（media query）來創建關鍵的分界點閾值。

/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */

/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }

我們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的屏幕大小之內。

@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) { ... }

柵格參數

通過下表可以詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工作的。

實例：移動設備和桌面屏幕

是否不希望在小屏幕設備上所有列都堆疊在一起？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-* 和 .col-md-*。請看下面的實例，研究一下這些是如何工作的。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

移動設備和桌面屏幕

實例：手機、平板、桌面

在上面案例的基礎上，通過使用針對平板設備的 .col-sm-* 類，我們來創建更加動態和強大的布局吧。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

手機、平板、桌面

實例：多余的列（column）將另起一行排列。

如果在一個 .row 內包含的列（column）大於12個，包含多余列（column）的元素將作為一個整體單元被另起一行排列。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

響應式列重疊

即便有上面給出的四組柵格class，你也不免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的情況。為了克服這一問題，建議聯合使用 .clearfix 和響應式工具類。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

除了列在分界點清除響應，您可能需要重置偏移, 后推或前拉某個列。請看此柵格實例。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

柵格實例

列偏移

使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

嵌套列　

為了使用內置的柵格系統將內容再次嵌套，可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被嵌套的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須占滿12列）。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列排序

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

六、Bootstrap全局樣式

1、標題相關

標題

<h1>一級標題36px</h1>
<h2>二級標題30px</h2>
<h3>三級標題24px</h3>
<h4>四級標題18px</h4>
<h5>五級標題14px</h5>
<h6>六級標題12px</h6>
<!--除了使用h標簽，Bootstrap內置了相應的全局樣式-->
<!--內聯標簽應用標題樣式-->
<span class="h1">一級標題36px</span>
<span class="h2">二級標題30px</span>
<span class="h3">三級標題24px</span>
<span class="h4">四級標題18px</span>
<span class="h5">五級標題14px</span>
<span class="h6">六級標題12px</span>

副標題

<!--一級標題中嵌入小標題-->
<h1>一級標題<small>小標題</small></h1>

2、文本對齊

<!--文本對齊-->
<p class="text-left">文本左對齊</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右對齊</p>

3、文本大小寫

<!--大小寫-->
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

4、表格

Class	描述
.table-striped	條紋狀表格
.table-bordered	帶邊框的表格
.table-hover	鼠標懸停變色的表格
.table-condensed	緊縮型表格
.table-responsive	響應式表格

5、狀態類

Class	描述
.active	鼠標懸停在行或單元格上時所設置的顏色
.success	標識成功或積極的動作
.info	標識普通的提示信息或動作
.warning	標識警告或需要用戶注意
.danger	標識危險或潛在的帶來負面影響的動作

6、表單

1、內聯表單

為 <form> 元素添加 .form-inline 類可使其內容左對齊並且表現為 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。

注意：

可能需要手動設置寬度
- 在 Bootstrap 中，輸入框和單選/多選框控件默認被設置為 width: 100%; 寬度。在內聯表單，我們將這些元素的寬度設置為 width: auto;，因此，多個控件可以排列在同一行。根據你的布局需求，可能需要一些額外的定制化組件。
一定要添加 label 標簽
- 如果你沒有為每個輸入控件設置 label 標簽，屏幕閱讀器將無法正確識別。對於這些內聯表單，你可以通過為 label 設置 .sr-only 類將其隱藏。還有一些輔助技術提供label標簽的替代方案，比如 aria-label、aria-labelledby 或 title 屬性。如果這些都不存在，屏幕閱讀器可能會采取使用 placeholder 屬性，如果存在的話，使用占位符來替代其他的標記，但要注意，這種方法是不妥當的。

實例一：

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

View Code

實例二：

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

View Code

實例三：

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

View Code

2、水平排列的表單

通過為表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，可以將 label 標簽和控件組水平並排布局。這樣做將改變 .form-group 的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加 .row 了。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

View Code

3、多選和單選框

多選框（checkbox）用於選擇列表中的一個或多個選項，而單選框（radio）用於從多個選項中只選擇一個。

默認外觀(堆疊在一起)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

View Code

4、下拉列表（select）

注意，很多原生選擇菜單 - 即在 Safari 和 Chrome 中 - 的圓角是無法通過修改 border-radius 屬性來改變的。

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

View Code

對於標記了 multiple 屬性的 <select> 控件來說，默認顯示多選項。

7、按鈕

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

按鈕樣式

<!-- Standard button -->
<button type="button" class="btn btn-default">（默認樣式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首選項）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危險）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（鏈接）Link</button>

按鈕大小

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默認尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默認尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

8、圖片

<img src="..." class="img-responsive" alt="Responsive image">

圖片形狀

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

9、輔助類

文本顏色

p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

背景顏色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

關閉按鈕

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

下拉三角

<span class="caret"></span>

快速浮動

<div class="pull-left">...</div>
<div class="pull-right">...</div>

內容塊居中

<div class="center-block">...</div>

清除浮動

<!-- Usage as a class -->
<div class="clearfix">...</div>

顯示與隱藏

<div class="show">...</div>
<div class="hidden">...</div>

實例

示例：郵箱登錄

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登錄注冊</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        .hide{
            display: none;
        }
        #email,#pwd{
            color: red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div id="login-box" class="col-md-4 col-md-offset-4">
            <h3 class="text-center">請登錄</h3>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        <span class="help-block hide" id="email"> 郵箱不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        <span class="help-block hide" id="pwd">密碼不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-default">登錄</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<script>
  $(".btn").on("click",function () {
    if($("#inputEmail3").val()===""){
        $("#email").removeClass("hide");
    }
    else{
        $("#email").addClass("hide");
    }
  });
  $(".btn").on("click",function () {
    if($("#inputPassword3").val()===""){
        $("#pwd").removeClass("hide");
    }else{
        $("#pwd").addClass("hide");
    }
  });
</script>
</body>
</html>

郵箱登錄

示例：基本信息表格

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基本信息收集卡</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>信息收集卡
            <small>共三步</small>
        </h1>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"
             style="width:30%;">
            1/3
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">基本信息<span class="glyphicon glyphicon-pushpin pull-right"></span></h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">姓名</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="inputPassword1" placeholder="姓名">
                        <span class="help-block hide">姓名不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">手機</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="inputPassword2" placeholder="手機">
                        <span class="help-block hide">手機不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">郵箱</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="inputPassword3" placeholder="郵箱">
                        <span class="help-block hide">郵箱不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">密碼</label>
                    <div class="col-sm-5">
                        <input type="password" class="form-control" id="inputPassword4" placeholder="密碼">
                        <span class="help-block hide">密碼不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">頭像</label>
                    <div class="col-sm-5">
                        <input type="file" id="inputPassword5">
                        <p class="help-block">只支持png、jpg、jif格式。</p>
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">屬性</label>
                    <div class=" col-sm-5">
                        <div class="radio ">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                我是一個好人
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1" >
                                我不是一個好人
                            </label>
                        </div>
                        <div class="radio disabled">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option1" disabled>
                                我不是一個人
                            </label>
                        </div>

                    </div>
                </div>
            </form>
        </div>

    </div>

    <button class="btn btn-success pull-right ">下一步</button>
</div>


<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

基本信息

示例：信息收集卡

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基本信息收集卡</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>信息收集卡
            <small>共三步</small>
        </h1>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"
             style="width:30%;">
            1/3
        </div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">基本信息<span class="glyphicon glyphicon-pushpin pull-right"></span></h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">姓名</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="inputPassword1" placeholder="姓名">
                        <span class="help-block hide">姓名不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">手機</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="inputPassword2" placeholder="手機">
                        <span class="help-block hide">手機不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">郵箱</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="inputPassword3" placeholder="郵箱">
                        <span class="help-block hide">郵箱不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">密碼</label>
                    <div class="col-sm-5">
                        <input type="password" class="form-control" id="inputPassword4" placeholder="密碼">
                        <span class="help-block hide">密碼不能為空</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">頭像</label>
                    <div class="col-sm-5">
                        <input type="file" id="inputPassword5">
                        <p class="help-block">只支持png、jpg、jif格式。</p>
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label text-right">屬性</label>
                    <div class=" col-sm-5">
                        <div class="radio ">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                我是一個好人
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1" >
                                我不是一個好人
                            </label>
                        </div>
                        <div class="radio disabled">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option1" disabled>
                                我不是一個人
                            </label>
                        </div>

                    </div>
                </div>
            </form>
        </div>

    </div>

    <button class="btn btn-success pull-right ">下一步</button>
</div>


<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

信息收集卡

示例：后台管理

<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--頁面使用的自定義CSS-->
    <link href="./Dashboard/dashboard.css" rel="stylesheet">
</head>

<body>
<!--導航欄-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="https://v3.bootcss.com/examples/dashboard/#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--導航欄結束-->

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="https://v3.bootcss.com/examples/dashboard/#">Overview <span class="sr-only">(current)</span></a>
                </li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/#">Export</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="https://v3.bootcss.com/examples/dashboard/">Nav item</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/">More navigation</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="https://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                <li><a href="https://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">管理后台
                <small>學生管理</small>
            </h1>
            <!--面板開始-->
            <div class="panel panel-primary">
                <div class="panel-heading ">學生管理</div>
                <div class="panel-body">

                    <div class="row my-table-toolbar">
                        <!--搜索框開始-->
                        <div id="search" class="input-group col-md-4 pull-left">
                            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Search for..">
                            <div class="input-group-addon">Go!</div>
                        </div>
                        <!--添加按鈕-->
                        <div class="col-md-1 pull-right">
                            <button class="btn btn-success" data-toggle="modal" data-target="#myModal">添加</button>
                        </div>
                    </div>
                    <!--表格-->
                    <table class="table">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        </tbody>
                    </table>
                    <!--分頁-->
                    <nav aria-label="Page navigation ">
                        <ul class="pagination pull-right">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!--面板結束-->

        </div>
    </div>
</div>
<!--模態框 開始-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">模態框</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模態框 結束-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<script src="../jquery-3.2.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

管理后台

示例：輪播圖

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="./imgs/banner_1.jpg" alt="...">
            <div class="carousel-caption">
                <h1>第一頁介紹</h1>
                <p>老實人的惡毒，像...</p>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/banner_2.jpg" alt="...">
            <div class="carousel-caption">
                <h1>第二頁介紹</h1>
                <p>老實人的惡毒，像...</p>
            </div>
        </div>
        <div class="item">
            <img src="./imgs/banner_3.jpg" alt="...">
            <div class="carousel-caption">
                <h1>第三頁介紹</h1>
                <p>老實人的惡毒，像...</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>


<hr>
<button class="btn btn-success" data-toggle="modal" data-target="#i1">點我彈出</button>


<div id="i1" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">模態框</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
    $('.carousel').carousel({       //默認2秒自動輪播
        interval: 2000
    });
</script>
</body>
</html>

View Code

想要了解更多相關內容嗎？點我啊！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端框架Bootstrap 前端框架之Bootstrap 前端之bootstrap框架前端框架Bootstrap簡介前端框架--Bootstrap 前端（三大框架、Bootstrap，jQuery，自整理） Twitter Bootstrap：前端框架利器前端開發框架Bootstrap和KnockoutJS Bootstrap——優秀的開源前端框架 django使用bootstrap前端框架

前端基礎 之 Bootstrap框架

瀏覽目錄

一、Bootstrap介紹

二、為什么要使用Bootstrap?

三、Bootstrap環境搭建

1、下載

2、環境搭建

四、布局容器

五、柵格系統

工作原理

媒體查詢

柵格參數

實例：移動設備和桌面屏幕

實例：手機、平板、桌面

實例：多余的列（column）將另起一行排列。

響應式列重疊

列偏移

嵌套列

列排序

六、Bootstrap全局樣式

1、標題相關

2、文本對齊

3、文本大小寫

4、表格

5、狀態類

6、表單

1、內聯表單

2、水平排列的表單

3、多選和單選框

4、下拉列表（select）

7、按鈕

8、圖片

9、輔助類

實例

免責聲明！

前端基礎之 Bootstrap框架

嵌套列　