有关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