2.Bootstrap 全局CSS樣式和字體圖標
阿新 • • 發佈：2017-12-06
-h 支持 變量 link itl 寬度 support 優先 全局
一.全局CSS樣式
1.html5文檔類型,標準,參照下面的進行設置
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
2.移動設備優先 bootstrap是移動設備優先的!
為了確保適當的繪制和觸屏縮放,需要在<head>之中添加viewport元數據標簽.
<meta name="viewport" content="width=device-width, initial-scale=1">
**通過視口(viewport)設置meta屬性為 user-scalable=no 可以禁用其縮放功能.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3.排版與鏈接
Bootstrap 排版、鏈接樣式設置了基本的全局樣式。分別是：
- 為
body元素設置background-color: #fff; - 使用
@font-family-base、@font-size-base和@line-height-base變量作為排版的基本參數 - 為所有鏈接設置了基本顏色
@link-color，並且當鏈接處於:hover狀態時才添加下劃線
這些樣式都能在 scaffolding.less 文件中找到對應的源碼.
4.Normalize.css
5.布局容器
.container 類用於固定寬度並支持響應式布局的容器。
<div class="container"> ... </div>
.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器
<div class="container-fluid"> ... </div>
......
二.字體圖標
創建一個嵌套的<span>標簽,並將圖標類應用到這個<span>標簽上!!!
**圖標類只能應用在不包含任何文本內容或子元素的元素上.只對內容為空的元素其作用!!
**為了設置正確的內補(padding),務必在圖標和文本之間添加一個空格.
<!doctype html> <!--HTML5的文檔--> <html lang="en"> <!--語言--> <head> <meta charset="UTF-8"> <!--編碼格式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--IE瀏覽器的解 析模式--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--視窗設置--> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <!-- 1.Bootstrap 層疊樣式表 --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --> <!--[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]--> </head> <body> <!--字體圖標 下面這個!--> <span class="glyphicon glyphicon-send"></span> <!-- 2.jQuery庫,必須在加載Bootstrap.min.js之前--> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 3.加載bootstrap的核心js庫 --> <script src="js/bootstrap.min.js"></script> </body> </html>
http://www.bootcss.com/
2.Bootstrap 全局CSS樣式和字體圖標