Bootstrap框架（1）

時間  2019-11-13
標籤 bootstrap 框架 欄目 Bootstarp 简体版
原文   原文鏈接

Bootstrap簡介

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。javascript

一 兩種引入方式 

方式1：Bootstrap 專門構建了免費的 CDN 加速服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可選的 Bootstrap 主題文件（通常不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script type="application/javascript" src="bootstrap-3.3.7-dist/jquery-3.1.1.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>Bootstrap-demo</title>
</head>
<body>
<div class="container">
  <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" 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="#">Bootstrap theme</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</div>
</body>
</html>
View Code

方式2(本地)：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
   <script type="application/javascript" src="bootstrap-3.3.7-dist/jquery-3.1.1.js"></script>
   <script type="application/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

   <title>Bootstrap-demo</title>
</head>
<body>
<div class="container">
  <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" 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="#">Bootstrap theme</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</div>
</body>
</html>
View Code

Bootstrap的CSS

一 柵格系統(Grid System)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <title>Bootstrap-demo</title>
    <style>
        .row [class*="col-"]{
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: rebeccapurple;
            border: 2px solid yellowgreen;
            color:#fff;
        }

        /*媒體查詢*/
        @media(max-width:800px){
            .media{
                color: red;
            }
        }
    </style>
</head>
<body>

<!------------------------------柵格系統的結構------------>
<div class="container">

  <div class="row">
      <div class="col-md-2">md-2</div>
      <div class="col-md-4">md-4</div>
      <div class="col-md-6">md-6</div>
  </div>

   <div class="row">
      <div class="col-md-6 col-sm-4">md6-sm4</div>
      <div class="col-md-6 col-sm-8">md6-sm8</div>
  </div>

<div class="media">hello @media</div>


<!------------------------------柵格系統的使用------------>

            <div class="row">
              <div class="col-sm-2">md-2</div>
              <div class="col-sm-4">md-4</div>
              <div class="col-sm-6">md-6</div>
            </div>

<!--   2 列偏移offset    -->

            <div class="row">
                   <div class="col-md-2">col-md-3</div>
                   <div class="col-md-4 col-md-offset-4">col-md-offset-3</div>
                   <!--<div class="col-md-1">col-md-1col-md-1col-md-1col-md-1col-md-1</div>-->
            </div>

<!--   3 列嵌套    -->

            <div class="row">
                  <div class="col-md-9">
                       <div class="row">
                           <div class="col-md-8">col-md-8</div>
                           <div class="col-md-4">col-md-4</div>
                       </div>
                  </div>
                  <div class="col-md-3">col-md-3</div>
            </div>


<!--   4 列排序    -->

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

<!--   5 清除浮動    -->

    <div class="row">
               <div class="col-md-6 col-sm-1">col-md-1</div>
               <div class="clearfix visible-sm"></div>
               <div class="col-md-6 col-sm-1">col-md-3</div>
    </div>


</div>
</body>
</html>

二 排版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <title>demo-排版</title>
</head>
<body>


<div class="container">
<!------------------------------排版基礎------------>
  <div class="row">
      <div class="col-md-2">hello md-2</div>
      <a class="col-md-4">md-4</a>
      <p class="col-md-6">md-6</p>
  </div>


<!------------------------------排版標題------------>

    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <h5>我是h5</h5>
    <h6>我是h6</h6>

    <!--若是向任何標題添加一個內聯子標題，只須要簡單地在元素兩旁添加 <small>，-->
    <!--或者添加 .small class便可-->

    <h1>h1...<small>h1子標題</small></h1>
    <h2>h2...<small>h2子標題</small></h2>


 <!------------------------------強調------------>

    <!--添加 class="lead"使段落文本更大更粗、行高更高-->
   <p class="lead">莫道君行早,更有早行人</p>

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

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

 <!------------------------------縮寫------------>
   <abbr title="HyperText Transfer Protocol">http</abbr><br>
   <abbr title="Domain Name System" class="initialism">dns</abbr>

 <!------------------------------地址(沒有太大樣式改變)------------>

        <address>
          <strong>oldboy</strong><br>
          XXX street<br>
          beijing<br>
          <abbr title="Phone">P:</abbr> (123) 456-7890
        </address>

<!------------------------------引用------------>
    <p class="lead">hello world hello world hello world hello world</p>
    <blockquote class="pull-left">
      <small><em>發佈於 2017-02-19</em></small>
    </blockquote>


<!------------------------------列表(有序列表、無序列表和定義列表)------------>
    <br>
    <hr>

<h3>未定義樣式列表</h3>
<ul class="list-unstyled">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
<h3>內聯列表</h3>
<ul class="list-inline">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<h3>水平的定義列表</h3>
<dl class="dl-horizontal">
  <dt>Desc</dt>
  <dd>item</dd>
  <dt>Desc</dt>
  <dd>item</dd>
</dl>

</div>
</body>
</html>

三 代碼

Bootstrap 容許您以兩種方式顯示代碼：java

  • 第一種是 <code> 標籤。若是您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。
  • 第二種是 <pre> 標籤。若是代碼須要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用
<div class="container">
<p><code><p>hello</p></code> 是一個p標籤</p>
<p>若是須要把代碼顯示爲一個獨立的塊元素，請使用 <code><pre></code>
<pre>
    <div>
        <h1>介紹</h1>
    </div>
</pre>
</div>

四 表格 

表格樣式

 

<div class="container">

  <table class="table table-striped">
      <!--關於表格存儲內容的描述或總結。-->
      <caption>條紋表格佈局</caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年齡</th>
          <th>salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Bob</td>
          <td>23</td>
          <td>3000</td>
        </tr>
        <tr class="danger">
          <td>steven</td>
          <td>34</td>
          <td>5000</td>
        </tr>
        <tr class="success">
          <td>alvin</td>
          <td>33</td>
          <td>7000</td>
        </tr>

        <tr class="warning">
          <td>alvin</td>
          <td>33</td>
          <td>7000</td>
        </tr>
      </tbody>
    </table>
</div>

響應式表格

經過把任意的 .table 包在 .table-responsive class 內可讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，看不到任何的差異。 python

五 表單

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

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

垂直表單

建立基本表單的步驟：bootstrap

  • 向父 <form> 元素添加 role="form"。
  • 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
  • 向全部的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
<form role="form">

  <div class="form-group">
    <label for="username">用戶名</label>
    <input type="text" class="form-control" id="username" placeholder="請輸入用戶名">
  </div>

  <div class="form-group">
    <label for="password">密碼</label>
    <input type="password" class="form-control" id="password" placeholder="請輸入密碼">
  </div>


  <div class="checkbox">
    <label>
      <input type="checkbox">記住密碼
    </label>
  </div>

  <button type="submit" class="btn">提交</button>
</form>

內聯表單

若是須要建立一個表單，它的全部元素是內聯的，向左對齊的，標籤是並排的，請向 <form> 標籤添加 class .form-inline。app

  • 默認狀況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內聯表單時，您須要在表單控件上設置一個寬度。
  • 使用 class .sr-only，您能夠隱藏內聯表單的標籤。

水平表單

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

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

    <form class="form-horizontal" role="form">

      <div class="form-group">
        <label for="username" class="col-sm-2 control-label">用戶名</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="username" placeholder="請輸入用戶名">
        </div>
      </div>

      <div class="form-group">
        <label for="pwd" class="col-sm-2 control-label">密碼</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="pwd" 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">登陸</button>
        </div>
      </div>

    </form>
</div>

表單控件狀態

輸入框焦點：當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。ide

禁用的輸入框 input：若是您想要禁用一個輸入框 input，只須要簡單地添加 disabled 屬性，這不只會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。

禁用的字段集 fieldset：對<添加 disabled 屬性來禁用內的全部控件。 

驗證狀態：Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只須要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）便可使用驗證狀態

<div class="container">

      <form class="form-horizontal" role="form">
    
      <div class="form-group">
        <label class="col-sm-2 control-label">normal</label>
        <div class="col-sm-10">
          <input class="form-control" type="text" placeholder="該輸入框能夠得到焦點...">
        </div>
      </div>
    
      <div class="form-group">
        <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
        <div class="col-sm-10">
          <input class="form-control" id="inputPassword" type="text" placeholder="該輸入框禁止輸入..." disabled>
        </div>
      </div>
    
    
    
      <fieldset disabled>
          
        <div class="form-group">
          <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label>
          <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
          </div>
        </div>
          
        <div class="form-group">
          <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單（Fieldset disabled）</label>
          <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
              <option>禁止選擇</option>
            </select>
          </div>
        </div>
          
      </fieldset>
          
          
      <div class="form-group has-success">
        <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputSuccess">
        </div>
      </div>
          
      <div class="form-group has-warning">
        <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputWarning">
        </div>
      </div>
          
      <div class="form-group has-error">
        <label class="col-sm-2 control-label" for="inputError">輸入錯誤</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputError">
        </div>
      </div>
          
      </form>
</div>
View Code

表單控件大小

您能夠分別使用 class .input-lg 和 .col-lg-* 來設置表單的高度和寬度

<div class="container">

  <form role="form">
  <div class="form-group">
    <!--have a try: input-sm-->
    <input class="form-control input-lg" type="text" placeholder=".input-lg">
  </div>

  <div class="form-group">
    <!--have a try: input-sm-->
    <select class="form-control input-lg">
      <option value="">默認選擇</option>
    </select>
  </div>

  <div class="row">
    <div class="col-lg-6">
      <input type="text" class="form-control">
    </div>
    <div class="col-lg-6">
      <input type="text" class="form-control">
    </div>
  </div>

  </form>
</div>

表單幫助文本

Bootstrap 表單控件能夠在輸入框 input 上有一個塊級幫助文本。爲了添加一個佔用整個寬度的內容塊，請在 <input> 後使用 .help-block。

<div class="container">

<form role="form">
  <span>幫助文本實例</span>
  <input class="form-control" type="text" placeholder="">
  <span class="help-block">幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例
  幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例幫助文本實例
  幫助文本實例幫助文本實例幫助文本實例</span>
</form>
</div>

六 按鈕

任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的默認外觀。可是 Bootstrap 提供了一些選項來定義按鈕的樣式

<div class="container">

<!-- 標準的按鈕 -->
<button type="button" class="btn btn-default">默認按鈕</button>
<!-- 提供額外的視覺效果，標識一組按鈕中的原始動做 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動做 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應謹慎採起的動做 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負面動做 -->
<button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 並不強調是一個按鈕，看起來像一個連接，但同時保持按鈕的行爲 -->
<button type="button" class="btn btn-link">連接按鈕</button>


<hr>
<button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button>
<button type="button" class="btn btn-default btn-sm">小的按鈕</button>

<hr>
<p>
  <button type="button" class="btn btn-default btn-lg ">默認按鈕</button>
  <button type="button" class="btn btn-default btn-lg active">激活按鈕</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button>
  <button type="button" class="btn btn-primary btn-lg active">激活的原始按鈕</button>
</p>
    
<hr>
<p>
  <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button>
  <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按鈕</button>
</p>

</div>
View Code

七 圖片

Bootstrap 提供了三個可對圖片應用簡單樣式的 class：

  • .img-rounded：添加 border-radius:6px 來得到圖片圓角。
  • .img-circle：添加 border-radius:50% 來讓整個圖片變成圓形。
  • .img-thumbnail：添加一些內邊距（padding）和一個灰色的邊框。
1
<img src = "mienv.png"  class = "img-rounded" >

另外，經過在 <img> 標籤添加 .img-responsive 類來讓圖片支持響應式設計。.img-responsive 類將 max-width: 100%; 和 height: auto; 樣式應用在圖片上

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