1、HTML5文檔結構
注意lang=“zh-CN”表示網頁為中文，如果是英文則為lang=“en-CN”。
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <title>頁面标題</title>
6 </head>
7 <body>
8
9 </body>
10 </html> 2、浏覽器相容模式
如果網頁在IE中打開，必須用最新的引擎渲染打開
快捷方式：sublime中通過emmet meta：compat插入
1 <meta http-equiv="X-UA-Compatible" content="IE=edge">
3、favicon站點圖示
快捷方式：sublime中通過emmet link:favicon 插入
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
4、預設字型
1 body{
2 font-family: "Helvetica Neue",
3 Helvetica,
4 Microsoft Yahei,
5 Hiragino Sans GB,
6 WenQuanYi Micro Hei,
7 sans-serif;
8 } 5、栅格系統
- 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)
6、字型圖示
1 css
2 @font-face {
3 font-family: 'itcast';
4 src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff');
5 }
6
7 [class^="icon-"],
8 [class*=" icon-"] {
9 /*注意上面選擇器中間的空格*/
10 /*我們使用的名為itcast的字型就是上面的@font-face的方式聲明的*/
11 font-family: itcast;
12 font-style: normal;
13 }
14
15 .icon-mobilephone::before{
16 content: '\e908';
17 } 1 html
2 <div class="col-md-2 text-center">
3 <a class="mobile-link" href="#">
4 <i class="icon-mobile"></i>
5 <span>手機微金所</span>
6 <!-- 這裡使用的是bootstrap中的字型圖示 -->
7 <i class="glyphicon glyphicon-chevron-down"></i>
8 <img src="..." alt="">
9 </a>
10 </div> 7、字型檔案格式
- eot : embedded-opentype
- svg : svg
- ttf : truetype
- woff : woff
8、按鈕樣式生成
http://blog.koalite.com/bbg/
可以通過界面生成一個新的按鈕樣式
1 .btn-itcast {
2 color: #ffffff;
3 background-color: #E92322;
4 border-color: #DB3B43;
5 }
6
7 .btn-itcast:hover,
8 .btn-itcast:focus,
9 .btn-itcast:active,
10 .btn-itcast.active,
11 .open .dropdown-toggle.btn-itcast {
12 color: #ffffff;
13 background-color: #E92322;
14 border-color: #DB3B43;
15 }
16
17 .btn-itcast:active,
18 .btn-itcast.active,
19 .open .dropdown-toggle.btn-itcast {
20 background-image: none;
21 }
22
23 .btn-itcast.disabled,
24 .btn-itcast[disabled],
25 fieldset[disabled] .btn-itcast,
26 .btn-itcast.disabled:hover,
27 .btn-itcast[disabled]:hover,
28 fieldset[disabled] .btn-itcast:hover,
29 .btn-itcast.disabled:focus,
30 .btn-itcast[disabled]:focus,
31 fieldset[disabled] .btn-itcast:focus,
32 .btn-itcast.disabled:active,
33 .btn-itcast[disabled]:active,
34 fieldset[disabled] .btn-itcast:active,
35 .btn-itcast.disabled.active,
36 .btn-itcast[disabled].active,
37 fieldset[disabled] .btn-itcast.active {
38 background-color: #E92322;
39 border-color: #DB3B43;
40 }
41
42 .btn-itcast .badge {
43 color: #E92322;
44 background-color: #ffffff;
45 } 9、小螢幕隐藏
- __hidden-xx__ : 在某種螢幕下隐藏
- __visible-xx__ : 在某種螢幕尺寸下顯示
visible-xx-xx：最後一個xx是決定顯示時的display到底是什麼。
<div class="topbar hidden-xs hidden-sm"></div> 或者
<div class="topbar visible-md visible-lg"></div> 10、Bootstrap擴充
- 通過bootstrap文檔對導覽列樣式的設定發現，其實本身是有一個類似于主題的概念
- navbar-default：預設的外觀
- navbar-inverse：暗色背景的樣式
- 是以我們希望可以通過自定義一套完整的風格：
+ navbar-itcast
```css
.navbar-itcast{
...
}
...具體代碼參考navbar-default實作即可
```
![第一個APP——GeoQuiz[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)