簡介
什么是Bootstrap？
框架：庫 lib library
jQuery作為一個框架來講，提供一套比較便捷的操作DOM的方式
把大家都需要的功能預先寫好到一些文件 這就是一個框架
Bootstrap 讓我們的 Web 開發更簡單，更快捷；
注意是 Bootstrap 不是 BootStrap！這是一個詞，不是合成詞，其含義為：n. 引導指令,引導程序
Bootstrap 是當下最流行的前端框架（界面工具集）；
特點就是靈活簡潔，代碼優雅，美觀大方；
其目的是為了讓 Web 開發更敏捷；
是 Twitter 公司的兩名前端工程師 Mark Otto 和 Jacob Thornton 在 2011 - 年發起的，并利用業余時間完成第一個版本的開發；
為什么使用Bootstarp？
- 生態圈火，不斷地更新迭代；
- 提供一套美觀大方地界面組件；
- 提供一套優雅的 HTML+CSS 編碼規范；
- 讓我們的 Web 開發更簡單，更快捷；
注意：
使用 Bootstrap 并不代表不用寫 CSS 樣式，而是不用寫絕大多數大家都會用到的樣式
準備
下載Bootstrap
- https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
- https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip
Compatible
設置IE瀏覽器的兼容模式版本
<meta http-equiv="X-UA-Compatible" content="IE=7">
element快捷語法：meta:compat
-
<meta http-equiv="X-UA-Compatible" content="IE=7">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
viewport視口
聲明當前網頁在移動端瀏覽器中展示的相關設置
element快捷語法:meta:vp
<meta name="viewport" content="width=device-width, initial-scale=1">
- 視口的作用：在移動瀏覽器中，當頁面寬度超出設備，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到設備這么大，然后展示
- 目前大多數手機瀏覽器的視口（承載頁面的容器）寬度都是980；
- 視口的寬度可以通過meta標簽設置
- 此屬性為移動端頁面視口設置，當前值表示在移動端頁面的寬度為設備的寬度，并且不縮放（縮放級別為1）
-
width:視口的寬度 -
initial-scale：初始化縮放 -
user-scalable:是否允許用戶自行縮放（值：yes/no; 1/0） -
minimum-scale:最小縮放，一般設置了用戶不允許縮放，就沒必要設置最小和最大縮放 -
maximum-scale:最大縮放
-
條件注釋
- 條件注釋的作用就是當判斷條件滿足時，就會執行注釋中的HTML代碼，不滿足時會當做注釋忽略掉
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
-
html5shiv.js讓瀏覽器可以識別HTML5的新標簽 -
respond.js讓低版本瀏覽器可以使用CSS3的媒體查詢 - 通過
file://的形式訪問頁面，respond.js不生效
基礎的Bootstrap模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 默認用IE最新瀏覽器引擎渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 聲明當前網頁在移動端瀏覽器中展示的相關設置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>Document</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
第三方依賴
jQuery
Bootstrap框架中的所有JS組件都依賴于jQuery實現html5shiv
讓低版本瀏覽器可以識別HTML5的新標簽，如header、footer、section等respond
讓低版本瀏覽器可以支持CSS媒體查詢功能
注：建議以后在HTML中將腳步的引入放到頁面最底下
.container
Bootstrap中響應式容器
會根據屏幕寬度改變寬度，有三個等級：1140px>970px>740px。當屏幕小于740px時，屏幕寬度多大.container盒子寬度就有多大。
mediaquery
@media (判斷條件（針對于當前窗口的判斷）){
/*這里的代碼只有當判斷條件滿足時才會執行*/
}
@media (min-width: 768px) and (max-width: 992px) {
/*這里的代碼只有當(min-width: 1280px)滿足時才會執行*/
.container {
width: 750px;
}
}
- 當使用min-width作為判斷條件一定要從小到大，其原因是CSS從上往下執行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體查詢</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
height: 1000px;
background-color: red;
}
.container{
width: 100%;
margin: 0 auto;
}
/*媒體查詢 當使用min-width作為判斷條件的時候，一定要從小到大的來寫，原因是CSS是從上往下執行*/
@media (min-width: 768px) {
.container{
width: 750px;
}
}
@media (min-width: 992px) {
.container{
width: 970px;
}
}
@media (min-width: 1200px) {
.container{
width: 1170px;
}
}
@media (min-width: 1280px) {
.container{
width: 1280px;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
柵格系統
- Bootstrap中定義了一套響應式的網格系統，
- 其使用方式就是將一個容器劃分成12列，
- 然后通過col-xx-xx的類名控制每一列的占比
.row類
- 因為每一個列默認有一個15px的左右外邊距
- row類的一個作用就是通過左右-15px屏蔽掉這個邊距
<div class="container">
<div class="row"></div>
</div>
.col-**-*類
- col-xs-[列數]：在超小屏幕下展示幾份
- col-sm-[列數]：在小屏幕下展示幾份
- col-md-[列數]：在中等屏幕下展示幾份
- col-lg-[列數]：在大屏幕下展示幾份
- xs : 超小屏幕 手機 (<768px)
- sm : 小屏幕 平板 (≥768px)
- md : 中等屏幕 桌面顯示器 (≥992px)
- lg : 大屏幕 大桌面顯示器 (≥1200px)
<div class="row">
<div class="col-md-2 text-center"></div>
<div class="col-md-5 text-center"></div>
<div class="col-md-2 text-center"></div>
<div class="col-md-3 text-center"></div>
</div>
此處頂部通欄已經被劃分成四列
text-center的作用就是讓內部內容居中顯示
hover圖片展示
.mobile-link:hover > img {
display: block;
}
按鈕樣式生成
- http://blog.koalite.com/bbg/
- 可以通過界面生成一個新的按鈕樣式
.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:hover,
.btn-itcast:focus,
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
background-image: none;
}
.btn-itcast.disabled,
.btn-itcast[disabled],
fieldset[disabled] .btn-itcast,
.btn-itcast.disabled:hover,
.btn-itcast[disabled]:hover,
fieldset[disabled] .btn-itcast:hover,
.btn-itcast.disabled:focus,
.btn-itcast[disabled]:focus,
fieldset[disabled] .btn-itcast:focus,
.btn-itcast.disabled:active,
.btn-itcast[disabled]:active,
fieldset[disabled] .btn-itcast:active,
.btn-itcast.disabled.active,
.btn-itcast[disabled].active,
fieldset[disabled] .btn-itcast.active {
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast .badge {
color: #E92322;
background-color: #ffffff;
}
小屏幕隱藏
<div class="topbar hidden-xs hidden-sm"></div>
或者
<div class="topbar visible-md visible-lg"></div>
- hidden-xx : 在某種屏幕下隱藏
-
visible-xx : 在某種屏幕尺寸下顯示
- visible-xx-xx：最后一個xx是決定顯示時的display到底是啥
