Bootstrap
介紹
它是twitter公司發佈的一個開源前端框架，可以理解爲它是一個寫好的大樣式表文件。樣式表文件中預設了非常多的class，如果想要實現某種效果，只要把自己的元素設置相應的class屬性即可。
http://bootcss.com 官方中文站
• 移動設備優先
• 所有的主流瀏覽器都支持 Bootstrap
• 是由動態CSS語言Less寫成，Github熱門開源項目
構成
Bootstrap目錄說明
• css目錄 – 用於存放Bootstrap框架使用的樣式文件
– bootstrap.css文件：Bootstrap框架的樣式文件
– bootstrap.min.css文件：Bootstrap框架的樣式壓縮文件
– bootstrap-theme.css文件：Bootstrap框架的主題文件
• fonts目錄 – 用於存放Bootstrap框架使用的字體文件
• js目錄 – 用於存放Bootstrap框架使用的核心javascript 文件
– bootstrap.js文件：Bootstrap框架的核心javascript文件
– bootstrap.min.js文件：Bootstrap框架的核心javascript 壓縮文件
Bootstrap相關技術
• 由於Bootstrap框架是基於jQuery使用的javascript代碼,所以想要使用Bootstrap框架，必須要先引入jQuery文 件
• 解決瀏覽器兼容性：
– html5shiv.min.js文件：解決 IE8 瀏覽器支持HTML5的新 元素
– respond.min.js文件：解決 IE8 瀏覽器支持CSS Media Query
全局CSS樣式
HTML5文件類型
– Bootstrap使用到的某些HTML元素和CSS屬性需要將頁面 設置爲HTML5
<!DOCTYPE html>
<html lang="zh-CN"> ... </html>
• 移動設備優先
– 爲了確保適當的繪製和觸屏縮放，需要在<head>之中添加viewport元數據元素
<meta name="viewport"
content="width=device-width, initial-scale=1">
CSS全局樣式
• 爲 body 元素設置 background-color: #fff;
• 使用 @font-family-base、@font-size-base 和 @line-height-base a變量作爲排版的基本參數
• 爲所有鏈接設置了基本顏色 @link-color ，並且當鏈接處於 :hover 狀態時才添加下劃線
佈局容器
• .container 類用於固定寬度並支持響應式佈局的容器
<div class="container">
...
</div>
• .container-fluid 類用於 100% 寬度，佔據全部視口 (viewport）的容器
<div class="container-fluid">
...
</div>
按鈕
Bootstrap提供五種顏色:
- - primary: 藍
- - info: 藍
- - danger: 紅
- - warning: 黃
- - success: 綠
- - muted: 灰
四種尺寸
文本
• 對齊
– text-left、text-center、text-right、text-justify、text-nowrap
• 大小寫
– text-lowercase、text-uppercase、text-capitalize
• 顏色
– text-success、text-warning、text-error、text-info、 text-primary
列表
• 無序列表和有序列表
– <ul>
– <ol>
• 列表樣式
– .list-unstyled
– .list-inline
• 描述列表
– <dl>
– .dl-horizontal
表單
基本表單
水平表單
內聯表單
• 單行輸入框
– form-control
• 多行文本域
– form-control
• 多選和單選框
– 內聯多選和單選框
• 下拉列表
– form-control
常用組件
字體圖標
• Bootstrap提供了一套專用於Web開發/移動開發常用的
一套圖標字體——Glyphicons Halflings
– 基本樣式類 glyphicon
– 其他修飾類
• 注意事項
– 引入 fonts 文件
– 不要和其他組件混合使用
– 只對內容爲空的元素起作用
下拉菜單
• 基本格式
– <div class="dropdown | dropup">
<button data-toggle="dropdown">
<ul class="dropdown-menu">
• 標題
– <li class="dropdown-header">
• 分割線
– <li class="divider"></li>
• 禁用
– <li class="disabled">
按鈕組
• 基本按鈕組
– <div class="btn-group「>
• 按鈕工具欄
– <div class="btn-toolbar「>
• 尺寸
– .btn-group-lg | sm | xs
• 自適應
• 垂直排列
– <div class="btn-group-vertical「>
警告框
<div class="alert alert-success" role="alert">
<div class="alert alert-info" role="alert">
<div class="alert alert-warning" role="alert">
<div class="alert alert-danger" role="alert">