bootstrap精簡教程

bootstrap 的學習非常簡單，而且它所提供的樣式又非常精美。只要稍微簡單的學習就可以製作出漂亮的頁面。

bootstrap中文網：http://v3.bootcss.com/  

bootstrap提供了三種類型的下載：

------------------------------------------------- ------------

用於生產環境的 Bootstrap

　　編譯並壓縮後的 CSS、JavaScript 和字型檔。不包含文件和原始碼文件。

Bootstrap 源碼

　　Less、JavaScript 和 字體檔案的來源碼，並且附有文件。需要 Less 編譯器和一些設定工作。

Sass

　　這是 Bootstrap 從 Less 到 Sass 的源碼移植項目，用於快速地在 Rails、Compass 或 只針對 Sass 的項目中引入。

------------------------------------------------- -----------

其實我們不用下載bootstrap也可以使用它：

Bootstrap 中文網 為 Bootstrap 專門建構了自己的免費 CDN 加速服務。基於國內雲端廠商的 CDN 服務，存取速度更快、加速效果更明顯、沒有速度和頻寬限制、永久免費。

base.html

  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    
  
  
    <h1>你好，bootstrap！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  

 base.html中已經引入了bootstrap，將其保存，我們就可以使用bootstrap提供的樣式了。

 

字體圖示

bootstrap預設提供了二百多個圖示。我們可以透過span標籤來使用這些圖示：

    <h3>图标</h3>   
    <span class="glyphicon glyphicon-home"></span>
    <span class="glyphicon glyphicon-signal"></span>
    <span class="glyphicon glyphicon-cog"></span>
    <span class="glyphicon glyphicon-apple"></span>
    <span class="glyphicon glyphicon-trash"></span>
    <span class="glyphicon glyphicon-play-circle"></span>
    <span class="glyphicon glyphicon-headphones"></span>

 

按鈕

　　標籤用於建立按鈕，bootstrap提供了豐富的按鈕樣式。

    <h3>按钮</h3>
    <button type="button" class="btn btn-default">按钮</button>
    <button type="button" class="btn btn-primary">primary</button>
    <button type="button" class="btn btn-success">success</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-warning">warning</button>
    <button type="button" class="btn btn-danger">danger</button>
    
    <h3>按钮尺寸</h3>
    <button type="button" class="btn btn-default">按钮</button>
    <button type="button" class="btn btn-primary btn-lg">primary</button>
    <button type="button" class="btn btn-success btn-sm">success</button>
    <button type="button" class="btn btn-info btn-xs">info</button>

    <h3>把图标显示在按钮里</h3>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span>  按钮</button>

 　　按鈕除了有預設的大小外，bootstrap還提供三個參數來調整按鈕的大小，分別是：btn-lg、btn-sm和btn-xs。

 

下拉選單

　　下拉選單是最常見的互動之一，bootstrap提供了漂亮的樣式。

     <h3>下拉菜单</h3>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

 

 

輸入框

　　透過標籤去建立輸入框。

    <h3>输入框</h3>
    <div class="input-group">
      <span class="glyphicon glyphicon-user"></span>
      <input type="text" placeholder="username">
    </div>

    <div class="input-group">
      <span class="glyphicon glyphicon-lock"></span>
      <input type="password" placeholder="password">
    </div>

 

 

導覽列

　　導覽列作為整個網站的指引必不可少。

    <h3>导航栏</h3>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div id="navbar" class="navbar-collapse collapse">
          <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-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li class="divider">
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div>
<!--/.nav-collapse -->
      </nav>

 

  

表单

　　人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交，查询条件的提交等。用

标签来创建表单。

   <h3>表单</h3>
    

File input

Example block-level help text here.

Check me out

Submit

 

 

警告框

　　警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签，通过bootstrap所提供的样式可以瞬间制作出漂亮的警告框。

    <h3>警告框</h3>
    <div class="alert alert-warning alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
    <div class="alert alert-success" role="alert">
        <a href="#" class="alert-link">success!</a>
    </div>
    <div class="alert alert-info" role="alert">
        <a href="#" class="alert-link">info!</a>
    </div>
    <div class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">warning!</a>
    </div>
    <div class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">danger!</a>
    </div>

  

 

进度条

　　系统的处理过程往往需要用户等待，进度条可以让用户感知到系统的处理过程，从而增加容忍度。

    <h3>进度条</h3>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        70%
      </div>
    </div>

 

 

 阅读原文请点击此处