1. 開發工具
開發工具 : sublime \ vs code
專門針對bootstrap的開發工具 : jetstrap
2. bootstrap的環境搭建
去官網下載 ---- 下載用於生產環的bootstrap
需要引入bootstrap文件-----包括css文件和js文件
使用bootstrap時如果要使用jquery , 則需要引入1.9.1以上的版本
3. bootstrap的全局樣式
特點: 代碼整潔 風格統一 美觀易用
bootstrap對默認的排版樣式進行了css樣式定義,使得各種基本結構套用出來的html頁面更加美觀
標題: (h1~h6/.h1~.h6) 在內聯樣式,如span標籤中可以使用標題類
h1:36px h2:30px h3:24px h4:18px h5:14px h6:12px
副標題: (small) 用small標籤包括內容,將以小標題的形式在頁面中顯示
文本: p標籤默認14px 、行高20px、底部外邊距10px（普通網頁中字體大小是16px）
文本對齊方式：
.text-left 左對齊
.text-center 居中
.text-right 右對齊
大小寫:
.text-lowercase 小寫
.text-uppercase 大寫
.text-capitalize 首字母大寫
表格 給表格添加一個類 table,表格會好看一些
.table-striped 給表格添加隔行換色
.table-border 給表格添加邊框
.table-hover 當鼠標懸浮時,有變色的效果
給表格的某一行添加顏色 <tr class="danger"></tr> 還有 success waring active info
表單
給form添加一個.form-inline的類,則form裏的所有內容會橫向排列
.form-control 給input框添加bootstrap的樣式,使它佈滿整個屏幕
<form>
<div class="form-group">
<label for="">這是一個輸入框:</label>
<input type="text" class="form-control" placeholder="這是一個輸入框">
</div>
</form>
input框 大小的改變 .input-lg(更大)/input-sm(更小)
label 添加sr-only類 使提示文字消失不見
button 添加類btn 變成圓角的button .btn-success/.btn-primary/.btn-info...改變按鈕的顏色 .active 設置按下的效果 .btn-lg/.btn-sm 改變按鈕的大小 .btn-block使按鈕全屏
a 標籤設置 .btn 也可變成按鈕的樣式
圖片: .img-rounded圖片圓角 .img-circle圓形 .img-thumbnail 代邊框的圓角圖形
4. bootstrap漸進
(1) meta 標籤中的 viewport
爲了更好的適應手機端的屏幕大小
-
width height 設置寬度和高度
-
user-scalable 設置是否允許用戶去放大或者縮小網頁
-
initial-scale 設置網頁初始化的大小
-
maximum-scale 允許用戶放大多少倍
-
minimun-scale 允許用戶縮小多少倍
<meta name="viewport" content="width=device-width,initial-scale=1 maxinum-scale=1,minimun-scale=1,user-scalable=yes" >
<!--device-width:當前屏幕的寬度-->
(2) 響應式---柵格佈局
<style>
@media screen and (min-width: *px) and (max-width: *px){
//調整屏幕效果
}
</style>
柵格參數
<style>
.test{
height:300px;
background:pink;
}
</style>
<body>
<div class="test .col-lg-3 col-md-4 .col-sm-6 .col-xs-12"></div>
</body>
| 超小屏幕(<768px) | 小屏幕 平板(>=768px) | 中等屏幕 桌面顯示器(>=992) | 大屏幕 大桌面顯示器(>=1200px) | |
|---|---|---|---|---|
| 類前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列(column)數 : 12
(3) 單位
網頁開發中的單位px
-
px 是相對於屏幕分辨率的單位
-
px的大小無法跟隨屏幕放大縮小
-
所有瀏覽器都支持px單位
網頁開發中的單位em
-
1em = 16px (但不完全是)
-
em會繼承父級元素的字體大小
-
IE的部分瀏覽器並不支持em
網頁開發中的單位rem
-
rem 與 em 相似
-
rem會繼承根元素的字體大小
-
html { font-size:10px }
(4) 字體圖標
特點: 體積小便於加載 無需重複設計 方便引用
使用glyphicon字體圖標庫
<style>
.font{
color:red;
font-size:100px;
}
</style>
<body>
<span class="glyphicon glyphicon-asterisk font"></span>
</body>
5. 組件
(1) 怪異的屬性 :
-
role 給盲文瀏覽器進行識別的
-
aria-label 當焦點落在輸入框時, 讀屏軟件會將輸入框中的內容讀取出來
-
tablndex 可以設置tab鍵在控件中移動 , 也就是焦點的移動順序
-
data- html5規範中新增的屬性 , 可以自定義的屬性 在頁面中不顯示,可以用來實現數據交互
(2) 下拉菜單
-
.dropdown 控制組件爲下拉
-
.dropdown-menu-right 代替.pull-right 右對齊
-
.divider 分割線
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="./jquery-3.3.1.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
這是按鈕
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="www.baidu.com">百度</a></li>
<li><a href="www.baidu.com">百度</a></li>
<li><a href="www.baidu.com">百度</a></li>
<li><a href="www.baidu.com">百度</a></li>
</ul>
</div>
</body>
(3) 控件組
.input-group 表示控件組
.input-group-addon可放置額外內容及圖標
<div class="input-group ">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
</div>
(4) 導航
-
以一個帶有class .nav的無需列表開始
-
.nav-tabs代表可切換的導航
-
.nav-pills代表膠囊導航
-
.nav-justified 使導航垂直
<ul class="nav nav-tabs">
<li class="active"><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
<ul class="nav nav-pills">
<li class="active"><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
<ul class="nav nav-justified">
<li class="active"><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
(5) 分頁
-
.pagination 在父元素中添加表示分頁
-
.pager放置在分頁區域
-
.previous 把鏈接向左對齊 .next把鏈接向右對齊
<nav>
<ul class="pager">
<li class="previous"><a href="#">向左</a></li>
<li class="next"><a href="#">向右</a></li>
</ul>
<ul class="pagination">
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">6</a>
</li>
</ul>
</nav>
(6) 進度條
-
.progress 表示進度條
-
通過狀態類改變進度條的顏色
-
.progress-bar-striped 使得進度條顏色漸變
<div class="progress">
<div class="progress-bar" style="width:60%;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:60%;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:60%;">
60%
</div>
</div>
(7) 列表
-
.list-group代表列表
-
.badge 代表狀態數
-
.active 代表選中狀態
<ul class="list-group">
<li class="list-group-item active">
這是一個列表
<span class="badge">14</span>
</li>
<li class="list-group-item disabled">
這是一個列表
<span class="badge">14</span>
</li>
<li class="list-group-item" list-group-item-info>
這是一個列表
<span class="badge">14</span>
</li>
</ul>
(8) 面板
-
.panel 代表面板
-
.panel-body 代表面板內容
-
.panel-footer代表面板的註腳
<div class="panel panel-primary">
<div class="panel-heading">
彈出層
</div>
<div class="panel-body">
這是面板的具體內容
</div>
<div class="panel-footer">
腳註
</div>
</div>
6. bootstrap的插件
-
bootstrap插件依賴bootstrap.js
-
bootstrap.js 基於jQuery
bootstrap中的插件 --- data屬性
-
通過data屬性控制頁面交互
-
$(document).off('.data-api') 解除屬性綁定
<!--一個簡單的彈窗效果-->
<button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger">
這是測試按鈕
</button>
<div id="danger">
這是一個內容
</div>