Bootstrap快速上手

下載 Bootstrap
您可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當您點擊這個鏈接時，您將看到如下所示的網頁：

點擊Download Bootstrap按鈕進入如下界面：

Download Bootstrap：下載 Bootstrap。點擊該按鈕，您可以下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。
Download Source：下載源代碼。點擊該按鈕，您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代碼。

如果您使用的是未編譯的源代碼，您需要編譯 LESS 文件來生成可重用的 CSS 文件。對於編譯 LESS 文件，Bootstrap 官方只支持 Recess，這是 Twitter 的基於 less.js 的 CSS 提示。
由於文件是被編譯過和壓縮過的，在獨立的功能開發中，您不必每次都包含這些獨立的文件。
本教程編寫時，使用的是最新版（Bootstrap 3）。

文件結構
預編譯的 Bootstrap
當您下載了 Bootstrap 的已編譯的版本，包名：bootstrap-3.3.6-dist.zip ，解壓縮 ZIP 文件，您將看到下面的文件/目錄結構：

如上圖所示，可以看到已編譯的 CSS 和 JS（bootstrap.），以及已編譯壓縮的 CSS 和 JS（bootstrap.min.）。同時也包含了 Glyphicons 的字體，這是一個可選的 Bootstrap 主題。
Bootstrap 源代碼
如果您下載了 Bootstrap 源代碼，包名bootstrap-3.3.6.zip，那麼文件結構將如下所示：

less/、js/ 和 fonts/ 下的文件分別是 Bootstrap CSS、JS 和圖標字體的源代碼。
dist/ 文件夾包含了上面預編譯下載部分中所列的文件和文件夾。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文檔。
HTML 模板
一個使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim 和 Respond.js 用於讓 IE8 支持 HTML5元素和媒體查詢 -->
      <!-- 注意： 如果通過 file://  引入 Respond.js 文件，則該文件無法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已編譯的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

在這裏，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用於讓一個常規的 HTML 文件變爲使用了 Bootstrap 的模板。

使用Bootstrap要引用的文件
要使用Bootstrap，基本架構要引用如下文件：

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" scr="jquery-1.10.2.min.js"></script>
 <script type="text/javascript" scr="bootstrap.min.js"></script>

最簡單的頁面示例代碼如下：

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>js</title>
    <link href="ace.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" scr="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" scr="bootstrap.min.js"></script>
</head>
<body>
<div>
    <h1 class="btn btn-success btn-large"><i class="icon-user icon-white"></i>Hello,World</h1>
</div>
</body>
</html>

使用前要點
1、DOCTYPE
Bootstrap使用了HTML5元素，所以HTML頭部要加上

<!DOCTYPE html> <html> .... </html>

2、viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Width=device-width => 表示頁面寬度是設備屏幕的寬度；確保網頁能被不同屏幕分辨率的設備正確呈現；
user-scalable=no => 是否可以調整縮放比例(yes/no)；
initial-scale=1.0 => 表示初始的縮放比例，以 1:1 的比例呈現，不會有任何的縮放；minimum-scale=0.5：最小允許的縮放比例；
maximum-scale=2.0：最大允許的縮放比例；

如果maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感覺。
這樣設置後，圖片或元素也設置style=”width:100%”，那麼圖片看起來也是全屏的了。

3、img-responsive響應式圖像
爲圖片加上img-responsive屬性，可以讓圖片對響應式佈局更加好。其樣式如下：

.img-responsive { display: inline-block; height: auto; max-width: 100%;
}

添加了此屬性的圖片會按比例縮小，但不能方法。
而上面的直接設置width:100%會放大，可能會出現失真的情況。

三、Bootstrap網格系統
1、網格系統是什麼東西
Bootstrap把一個頁面分爲12列，通過指定數字就能夠設置寬度。簡單的示例:

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

顯示效果如下：

當瀏覽器的寬度縮小時(爲下面說明響應式做鋪墊)，顯示效果如下：

要點：
1、row是容器，網格樣式要放在row容器裏面。
2、1個網頁是12列。
3、一共有4個前綴的網格class前綴，分別應用於分辨率的設備。
圖表如下：

2、響應式網格
示例說明：

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

顯示效果如下：

當瀏覽器縮小時：

當再進一步縮小時：

這就是所謂的響應式，說白了”響應式”就是根據瀏覽器的寬度來決定使用哪一個class，以上效果展示了響應式佈局的原理:

當屏幕寬度u≥1200px時，bootstrap會自動選用col-lg-*這個class；
當屏幕寬度u≥992px時，bootstrap會自動選用col-sm-*這個class；
當屏幕寬度u≥768px時，bootstrap會自動選用col-md-*這個class；
當屏幕寬度u<768px時，bootstrap會自動選用col-lg-*這個class；

3、偏移列
偏移列的意思是隔開多少個列。
示例：

<div class="col-xs-12 col-sm-6 col-md-3">3</div> //向右偏移2列了 <div class="col-md-offset-2 col-xs-12 col-sm-6 col-md-3">3</div>

顯示效果如下：

.col-xs=* 類不支持偏移，它們可以簡單地通過使用一個空的單元格來實現該效果。
這個樣式相當於設置了margin:寬度*列數。

4、嵌套列
在網格里嵌套網格

<div class="row">
        <div class="col-xs-8">
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">2</div>
            <div class="col-xs-2">2</div>
        </div>
    </div>

輸出效果如下：

5、列排序
通過使用”.col-md-push-“和”.col-md-pull-“能夠互換順序。其中*的範圍從1到11。
示例如下：

<div style="margin-top:20px"></div>
    無排序：
    <div class="row">
        <div class="col-sm-4">First</div>
        <div class="col-sm-8">Second</div>
    </div>
    有排序：
    <div class="row">
        <div class="col-sm-4 col-sm-push-8">First</div>
        <div class="col-sm-8 col-sm-pull-4">Second</div>
    </div>

顯示效果如下：

以上class使用的理解爲：本來First佔據4列，Second佔據8列，如果要互換位置，則First要向右推(push)8個列，而Second要向左拉4個

Bootstrap CDN推薦
本站實例採用的是百度的靜態資源庫(http://cdn.code.baidu.com/)上的Bootstrap資源。

百度的靜態資源庫的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費,引入代碼如下：

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<!-- 可選的Bootstrap主題文件（一般不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

實例：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 實例</title>
    <!-- 包含頭部信息用於適應不同設備 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 樣式表 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <h2>表格</h2>
      <p>創建響應式表格 (將在小於768px的小型設備下水平滾動)。另外：添加交替單元格的背景色：</p>      
      <div class="table-responsive">          
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th>#</th>
             <th>Name</th>
             <th>Street</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>Anna Awesome</td>
             <td>Broome Street</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Debbie Dallas</td>
             <td>Houston Street</td>
           </tr>
           <tr>
             <td>3</td>
             <td>John Doe</td>
             <td>Madison Street</td>
           </tr>
         </tbody>
       </table>
      </div>

      <h2>圖像</h2>
      <p>創建項應式圖片(將擴展到父元素)。 另外：圖片以橢圓型展示：</p>            
      <img src="cinqueterre.jpg" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236"> 

      <h2>圖標</h2>
      <p>插入圖標:</p>      
      <p>雲圖標: <span class="glyphicon glyphicon-cloud"></span></p>      
      <p>信件圖標: <span class="glyphicon glyphicon-envelope"></span></p>            
      <p>搜索圖標: <span class="glyphicon glyphicon-search"></span></p>
      <p>打印圖標: <span class="glyphicon glyphicon-print"></span></p>      
      <p>下載圖標：<span class="glyphicon glyphicon-download"></span></p>      
    </div>

    <!-- JavaScript 放置在文檔最後面可以使頁面加載速度更快 -->
    <!-- 可選: 包含 jQuery 庫 -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可選: 合併了 Bootstrap JavaScript 插件 -->
    <script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>

</html>

在小屏設備效果如圖：

確實是白灰相間的，可能在這裏看不清楚，需要親自試驗一下。

Bootstrap快速上手

《Python進階》學習筆記

Leetcode 3161. 物塊放置查詢

leetcode 60 排列序列

一個docker容器暴露多個端口

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

TCP連接通信過程及網絡管理

H5新春賀卡之筆記

數據庫管理視圖:查看視圖定義

初識Linux-系統安裝，系統信息查看，馬哥初印象

文本編輯器專輯之—Vim

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結