2018.8.5 Bootstrap 使用

時間  2019-11-19
標籤 2018.8.5 bootstrap 使用 欄目 Bootstarp 简体版
原文   原文鏈接

Bootstrap的環境搭建

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />


<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

HTML模板

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap HTMl模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
     
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件須要引入 jQuery) -->
      <script src="js/jquery-3.3.1.min.js"></script>
      <!-- 包括全部已編譯的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

Bootstrap 網格系統

Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

網格系統的定義

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，能夠隨着設備或視口大小的增長而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預約義類，也包含了用於生成更多語義佈局的功能強大的混合類。

網格系統的使用

·行必須放置在 .container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。
·使用行來建立列的水平組。
·內容應該放置在列內，且惟有列能夠是行的直接子元素。
·預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。
·列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
·網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。

基本網格系統的結構

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

網格系統的列排序實例

在下面的實例中，咱們有兩列布局，左列很窄，做爲側邊欄。咱們將使用 .col-md-push-* 和 .col-md-pull-* 類來互換這兩列的順序。

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
        </div>
        <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序後
        </p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左邊
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右邊
        </div>
    </div>
</div>

bootstrap排版

引導主體副本

爲了給段落添增強調文本，則能夠添加 class="lead"，這將獲得更大更粗、行高更高的文本，以下面實例所示：
<p class="lead">添加clss實現排版</p>

強調

HTML 的默認強調標籤 <small>（設置文本爲父文本大小的 85%）、<strong>（設置文本爲更粗的文本）、<em>（設置文本爲斜體）。Bootstrap 提供了一些用於強調文本的類，以下面實例所示：

<small>本行內容是在標籤內</small><br>
<strong>本行內容是在標籤內</strong><br>
<em>本行內容是在標籤內，並呈現爲斜體</em><br>
<p class="text-left">向左對齊文本</p>
<p class="text-center">居中對齊文本</p>
<p class="text-right">向右對齊文本</p>
<p class="text-muted">本行內容是減弱的</p>
<p class="text-primary">本行內容帶有一個 primary class</p>
<p class="text-success">本行內容帶有一個 success class</p>
<p class="text-info">本行內容帶有一個 info class</p>
<p class="text-warning">本行內容帶有一個 warning class</p>
<p class="text-danger">本行內容帶有一個 danger class</p>

列表

Bootstrap 支持有序列表、無序列表和定義列表。

有序列表：有序列表是指以數字或其餘有序字符開頭的列表。
無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的着重號開頭的列表。若是您不想顯示這些着重號，您可使用 class .list-unstyled 來移除樣式。您也能夠經過使用 class .list-inline 把全部的列表項放在同一行中。
定義列表：在這種類型的列表中，每一個列表項能夠包含 <dt> 和 <dd> 元素。<dt> 表明 定義術語，就像字典。接着，<dd> 是 <dt> 的描述。.dl-horizontal 可讓 <dl> 內的短語及其描述排在一行。開始是像 <dl> 的默認樣式堆疊在一塊兒，隨着導航條逐漸展開而排列在一行。


<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>

排版類

<p class="text-lowercase">Lowercased text（小寫文本）.</p>

<p class="text-uppercase">Uppercased text（大寫文本）.</p>    
  
<p class="text-capitalize">Capitalized text（首字母大寫文本）.</p>


<p class="text-left">左對齊文本</p>

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

<p class="text-justify">對齊文本。該段落會根據屏幕的大小對超出屏幕的文字進行換行</p>   
   
<p class="text-nowrap">該段落不會根據屏幕的大小對超出屏幕的文字進行換行。</p>

Bootstrap 代碼

pre 會造成一個圈

<p><code>&lt;header&gt;</code> 做爲內聯元素被包圍。</p>
<p>若是須要把代碼顯示爲一個獨立的塊元素，請使用 &lt;pre&gt; 標籤：</p>
<pre>
&lt;article&gt;
    &lt;h1&gt;Article Heading&lt;/h1&gt;
&lt;/article&gt;
</pre>

Bootstrap 表格

table 類

.table  爲任意 <table> 添加基本樣式 (只有橫向分隔線)  這是最基本的    

.table-striped  在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持)
    
.table-bordered 爲全部表格的單元格添加邊框   

.table-hover    在 <tbody> 內的任一行啓用鼠標懸停狀態
    
.table-condensed    讓表格更加緊湊


一句代碼實現所有的實現
<table class="table table-striped table-bordered table-hover table-condensed">

, 和 類

.active 將懸停的顏色應用在行或者單元格上
    
.success    表示成功的操做 

.info   表示信息變化的操做
    
.warning    表示一個警告的操做
    
.danger 表示一個危險的操做

Bootstrap 表單

Bootstrap 提供了下列類型的表單佈局：

垂直表單（默認）
內聯表單
水平表單

內聯表單

<form class="form-inline" role="form">
  <div class="form-group">

水平表單

水平表單與其餘表單不只標記的數量上不一樣，並且表單的呈現形式也不一樣。如需建立一個水平佈局的表單，請按下面的幾個步驟進行：

向父 <form> 元素添加 class .form-horizontal。
把標籤和控件放在一個帶有 class .form-group 的 <div> 中。
向標籤添加 class .control-label。



<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名字</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="firstname" 
                   placeholder="請輸入名字">
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">姓</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="lastname" 
                   placeholder="請輸入姓">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 請記住我
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登陸</button>
        </div>
    </div>
</form>

複選框（Checkbox）和單選框（Radio）

複選框和單選按鈕用於讓用戶從一系列預設置的選項中進行選擇。

當建立表單時，若是您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。若是您限制用戶只能選擇一個選項，請使用 radio。
對一系列複選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。
下面的實例演示了這兩種類型（默認和內聯）：


默認是垂直的
<label for="name">默認的複選框和單選按鈕的實例</label>
<div class="checkbox">
    <label><input type="checkbox" value="">選項 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">選項 2</label>
</div>




這個是水平的   也就是內聯的
<div>
<label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 選項 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 選項 2
    </label>
</div>

選擇框（Select）

當您想讓用戶從多個選項中進行選擇，可是默認狀況下只能選擇一個選項時，則使用選擇框。

使用 <select> 展現列表選項，一般是那些用戶很熟悉的選擇列表，好比州或者數字。
使用 multiple="multiple" 容許用戶選擇多個選項。



<form role="form">
  <div class="form-group">
    <label for="name">選擇列表</label>
    <select class="form-control">    ///
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <label for="name">可多選的選擇列表</label>
    <select multiple class="form-control">   ///
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
</form>

Bootstrap 分頁

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程