有關bootstrap入門的知識講解

原創 Surpass-oneself 2020-06-27 11:01

一、boostrap是做什麼用的，我們需要用它來做什麼？

bootstrap就是一個框架集合，集合我們常用的工程組件。讓我們不用做重複性質的工作。比如它封裝了常用的導航樣式、按鈕樣式、輪播圖等等。我們需要做的是引入boostrap然後利用現有的功能組件，組合成我們想要的效果。

二、 bootstrap的組成部分介紹

基礎CSS樣式

預置界面組件

JavaScript插件

JavaScript插件的依賴情況

如何使用Javascript插件

內置組件

三、bootstrap的基本的模板，用的時候注意每個引入的JS、CSS樣式的路徑需要更改，根據自己的文件位置，更改路徑。每次用複製粘貼就可以。剛開始學習最好不使用壓縮版本，這樣方便我們查看源碼。

<!--h5文檔申明-->
<!DOCTYPE html>
<!--文檔語言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文檔編碼申明-->
    <meta charset="utf-8">
    <!--要求當前網頁使用瀏覽器最高版本的內核來渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--視口的設置：視口的寬度和設備一致，默認的縮放比例和PC端一致，用戶不能自行縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <!-- 優先加載和瀏覽器解釋 -->


    <title>title</title>


    <!-- Bootstrap 核心樣式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分別用來解決IE8版本瀏覽器不支持 H5標籤和媒體查詢的  不兼容問題-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打開，本地打開。最好http://打開 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>


<h1>你好 世界</h1>
<!-- bootstrap依賴jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>



三、對於這些功能我們怎麼使用很多人不知道如何下手。其實我們只要知道它怎麼用就可以，但是我們還是需要認真看一下源碼以瞭解它內部的機制是什麼。比如說柵格系統。

<!--h5文檔申明-->
<!DOCTYPE html>
<!--文檔語言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文檔編碼申明-->
    <meta charset="utf-8">
    <!--要求當前網頁使用瀏覽器最高版本的內核來渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--視口的設置：視口的寬度和設備一致，默認的縮放比例和PC端一致，用戶不能自行縮放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
    <!-- 優先加載和瀏覽器解釋 -->
    <title>title</title>
    <!-- Bootstrap 核心樣式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分別用來解決IE8版本瀏覽器不支持 H5標籤和媒體查詢的  不兼容問題-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打開，本地打開。最好http://打開 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
    <style>
        .container{
            height: 100px;
            background: pink;
        }
        .container > .row{
            height: 50px;
            background: green;
        }
        .container > .row > div{
            height: 25px;
            border: 1px solid #ccc;
        }
        .container > .row > div > .row > div{
            height: 10px;
            border: 1px solid red;
        }
    </style>
</head>

<body>


3.1分析container就相當於整個網頁的版心。那麼我們在用的時候，對照一下源碼就很好理解 container的實現方法

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

}

3.2以上是boots的源碼文件，我們可以看出，這裏封裝的功能有媒體查詢和對於不同屏幕大小的兼容。他與內容的間距是padding 值是15 px。

<div class="container">
    <div class="row">
        <!--柵格嵌套-->
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
        </div>
        <!--列的偏移 xs表示超小的屏幕-->
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-3"></div>
                <div class="col-xs-6 col-xs-offset-3"></div>
            </div>

        </div>

3.3我們可以在源碼中看到關於柵格系統的每列是如何實現均等分佈，用的是百分比的方式，還有在每列，每一項中如果想插入幾個項目，左右分佈怎麼辦？在bootstrap中有關於列的排序 和偏移的設置。我們在源碼中看這個是如何一步步實現的。

.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0;
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;

  }

3.4已上代碼比較長，需要我們簡單看一下就可以理解，在本例中的樣式實現的原理。我們可以看到，bootstrap中所有的類都是什麼類，都是公共類，我們如何想使用這個功能非常的簡只需要在每一個類名後面加上什麼？加上需要效果的類名就可以。

        <!--列的排序-->
        <div class="col-xs-4">
            <div class="row">
                <!--
                push 往後推
                pull 往前拉
                列排序功能 push是移動幾個等分 首先是第一個是向右移動9個等分 那麼前後兩個就可以交換一下位置後面是往前拉-->
                <div class="col-xs-3 col-xs-push-9">col-xs-3</div>
                <div class="col-xs-9 col-xs-pull-3">col-xs-9</div>
               
            </div>
        </div>
    </div>
</div>
<button class="btn btn-default btn-primary btn-lg btn-block">按鈕</button>
<!-- bootstrap依賴jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Bootstrap-3

複習： Bootstrap是一個HTML/CSS/JS框架，適用於響應式Web項目，內容涉及到：   HTML: 基於H5已有標籤添加了data-*屬性   CSS: (1)CSSReset   (2)千個class   JS: 基於jQ

yji534123343 2020-07-05 01:11:36

web前端小白經常出現“四”個錯誤，關乎你是否能成爲一個優秀的前端工程師

錯誤一轉件所謂“應該能行”的代碼 錯誤：無論是JavaScript，還是在服務器上運行的代碼，開發人員都需要測試並確認它是否可以正常工作，而不是在部署了之後，就認爲它應該就能從一而終地運行。 影響：不經過適當錯誤檢查的網站就是對最終用戶耍

原創 2023-10-10 11:11:44

微服務（配置中心理論）

 配置中心高級應用及基本原理 1.配置中心是如何工作的？ 配置項怎麼配置？ 通過配置文件進行配置並存儲在git中 誰去讀配置文件？ configserver配置中心 應用系統中配置信息從哪來？ 從configserver遠程獲取 2.R

原創 2021-01-30 10:55:28

微服務（spring cloud配置中心）

Spring  cloud配置中心 用於集中配置數據管理，簡化微服務集羣環境下大量配置的更新工作。 1:理解bootstrap.yaml    它會在application之前加載，如果和application有同名屬性，先啓動的會被覆

原創 2021-01-30 10:55:25

Electron 案例 # 本地音樂播放器 開發教程

文中就部分關鍵代碼作了解釋。完整代碼見文末附錄。 進程間通信 原型圖 功能流程

真·skysys 2020-07-08 11:54:32

Bootstrap-Table將全部數據導出爲Excel的方法

在一般的系統開發中，將表格數據導出爲Excel是一項常見的功能。導出Excel分爲三種情況，第一種情況是導出當前頁的數據，第二種情況是導出當前頁已選擇的數據，第三種情況是導出全部數據。前兩種情況大致相同，本質上可歸爲一類，因爲它們

HerryDong 2020-07-08 04:12:25

Bootstrap-Table表格內添加操作按鈕的實現方法

一般在利用Bootstrap-Table顯示後臺數據時，我們往往會在表格的最後一列添加操作按鈕，以便對某條數據進行修改和刪除操作，如下圖所示： 當點擊編輯按鈕時，界面會彈出模態框供用戶操作，點擊修改後表格自動刷新，如下圖所示：

HerryDong 2020-07-08 04:12:25

Bootstrap TreeView使用教程三：製作樹形下拉框

前兩篇博客介紹了Bootstrap TreeView的使用方法，這篇博客就來介紹一下如何利用Bootstrap TreeView製作一個樹形下拉框，先來看一下效果： 其實原理很簡單，先創建一個文本框，然後在文本框下方創建樹，讓其

HerryDong 2020-07-08 04:12:25

Bootstrap-Table實現自定義條件查詢

鑑於最近有人詢問Bootstrap-Table的自定義條件查詢如何實現，今天特在此說明。首先展示一下效果： 默認查詢 條件查詢 測試數據 前端代碼 <!DOCTYPE html> <html> <head> <met

HerryDong 2020-07-08 04:12:22

Bootstrap-Table跳轉到指定頁

Bootstrap-Table本身不帶跳轉頁的功能，所幸在網上找到了bootstrap-table-pagejump這個插件，依靠這個插件可以輕鬆實現跳轉功能，如下圖所示： bootstrap-table-pagejump下載

HerryDong 2020-07-08 04:12:22

Bootstrap筆記4

圖片響應式 目的： 各種終端都需要正常顯示圖片 移動端應該使用更小（體積）的圖片 實現方式 將元素中直接設置的圖片背景刪除，換成兩個data-屬性（如：data-img-sm=“小圖路徑”，data-img-lg=“大圖路徑”）

mintsolace 2020-07-06 08:30:16

Bootstrap筆記2

柵格系統 Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分爲最多12列。它包含了易於使用的預定義類，還有強大的mixin用於生成更具語義的佈局。 簡介： 柵

mintsolace 2020-07-06 08:30:16

Bootstrap3 工具提示插件的方法

工具提示插件的方法 1、.tooltip(options) 使用一個可選的對象參數 options調用某個頁面元素的工具提示。如：   $('#element').tooltip ({   placement: right }) 2、

ixygj197875 2020-07-05 16:02:02

Fuel UX使用

Fuel UX是Bootstrap的一個擴展，但是官方文檔寫的不是很容易引用，所以想要引用非常麻煩，下面總結一下引用Fuel UX的方法 1.將html中Bootstrap得引用全部刪除 2.將jquery包，Bootstrap包，F

jingmiaowill 2020-07-05 12:05:27

Bootstrap-4

今日目標： (1)Bootstrap第四部分：插件 —— 掌握 (2)Less語言 —— 重點 (3)Bootstrap第五部分：定製 —— 難點     1.Bootstrap插件概述   Bootstrap一共提供了十幾個插件函數，可

yji534123343 2020-07-05 01:11:36