Bootstrap框架的學習（二） - chengxs－IT工程師數位筆記本

文章出處

一、下載Bootstrap

Bootstrap （當前版本 v3.3.0）提供以下幾種方式幫你快速上手，每一種方式針對具有不同技能等級的開發者和不同的使用場景。

下載地址：http://v3.bootcss.com/getting-started/#download

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

Bootstrap 中文網為 Bootstrap 專門構建了自己的免費 CDN 加速服務。基于國內云廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。

二、預編譯版

下載壓縮包之后，將其解壓縮到任意目錄即可看到以下（壓縮版的）目錄結構：

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

PS：字體可以添加也可以不添加

三、實例一

<html lang="en">
  <head>
      <!--這三個meta標簽必須在head頭三個-->
      <!--1、utf8中文-->
    <meta charset="utf-8">
    <!--2、IE瀏覽器的適配-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--3、適配到手機屏幕-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--title題目-->
    <title>First Template for Bootstrap</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
      <!--導航條，nav標簽-->
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <ul class="nav navbar-nav">
          <!--導航條內容-->
          <li class="active"><a href="home.html">首頁 <span class="sr-only">(current)</span></a></li>
          <li><a href="Java.html">JAVA</a></li>
          <li><a href="#">HTML</a></li>
          <li><a href="#">PS</a></li>
      </div>
   </nav>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
  <!-- Bootstrap核心js依賴于jQuery,所以要先引用jQuery-->
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="js/bootstrap.min.js"></script>
</body></html>

運行截圖如下圖所示：

四、實例二

柵格系統是Bootstrap的和具有優勢。采用的是流式的柵格系統，對寬度進行12等分。

 <!--柵格系統， 全局CSS樣式-柵格系統  -->
  <!--柵格系統放在container容器中-->
  <div class="container" style="margin-top: 60px">
    <!--添加一行占用12列，添加img-->
    <div class="row">
        <!--javascript插件，添加carousel輪播圖-->
  <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>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img/sliders/pic1.png" />
        <div class="carousel-caption">
          <h3>College Team</h3>
        </div>
      </div>
      <div class="item">
        <img src="img/sliders/pic2.jpg" />
        <div class="carousel-caption">
          <h3>College Life</h3>
        </div>
      </div>
      <div class="item">
        <img src="img/sliders/pic3.png" />
        <div class="carousel-caption">
          <h3>Country Project</h3>
        </div>
      </div>
            <div class="item">
        <img src="img/sliders/pic3_3.jpg" />
        <div class="carousel-caption">
          <h3>Hello World</h3>
        </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>
    </div>
    <!--頁面分為左右兩部分 4：8-->
    <div class="row" style="margin-top: 10px">
      <div class="col-sm-4">
        <!--添加列表組件-->
        <div class="list-group" style="margin-bottom:0">
          <a href="#" class="list-group-item active">看看>看看</a>
          <a href="Project_exp.html" class="list-group-item">看看</a>
          <a href="#" class="list-group-item">看看</a>
          <a href="#" class="list-group-item">看看</a>
          <a href="#" class="list-group-item">看看</a>
          <a href="#" class="list-group-item">看看</a>
        </div>
        <!--<div>
          <img src="img/class.gif">
        </div>-->
      </div>
      <div class="col-sm-8">
          <!--first-->
        <table id="first" class="table table-bordered table-striped table-hover table-condensed">
          <tr class="active">
            <td>看看</td>
          </tr>
          <tr class="success">
            <td>看看</td>
          </tr>
          <tr class="warning">
            <td>看看</td>
          </tr>
          <tr class="danger">
            <td>看看</td>
          </tr>
          <tr class="info">
            <td>看看</td>
          </tr>
          <tr class="active">
            <td>看看</td>
          </tr>
          <tr class="success">
            <td>看看</td>
          </tr>
          <tr class="danger">
            <td>個人主頁（博客園）：<a href="https://home.cnblogs.com/u/chengxs/" target="_blank">https://home.cnblogs.com/u/chengxs/</a></td>
          </tr>
          <tr class="info">
            <td>看看</td>
          </tr>
          <tr class="success">
            <td>看看</td>
          </tr>
          <tr class="danger">
            <td>看看。</td>
          </tr>
        </table>
        <!-- 添加分頁效果-->
        <nav>
          <ul class="pagination" style="margin: 0px 0px">
            <li>
              <a href="#" aria-label="Previous">
                <span aria-hidden="true">«</span>
              </a>
            </li>
            <li class="active"><a href="#first">1</a></li>
            <li><a href="#second">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">»</span>
              </a>
            </li>
          </ul>
        </nav>
     </div>      
     </div>
    </div>