響應式佈局和BootStrap 全局CSS樣式

時間 2019-11-16

標籤響應佈局 bootstrap 全局 css 樣式欄目 Bootstarp 简体版

原文原文鏈接

一、什麼是響應式佈局css

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，這個概念是爲解決移動互聯網瀏覽而誕生的。前端

簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。jquery

響應式網絡設計（ RWD / AWD）的出現，目的是爲移動設備提供更好的體驗，而且整合從桌面到手機的各類屏幕尺寸和分辨率，用技術來使網頁適應從小到大（如今到超大）的不一樣分辨率的屏幕。web

二、bootstrap簡介bootstrap

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。api

是基於LESS的一套前端工具庫，意圖很是明顯，想以一個項目，整合Compass，Blueprint，h5bp的目標功能，成爲web前端的一站式解決方案。

* 一套完整的基礎css模塊，但不如compass豐富和強大
* 一套預約義樣式表，包括一個格子布局系統，和blueprint提供的差很少，只是設計風格不同
* 一組基於Jquery的js交互插件，這是Bootstrap真正強大的地方，也是她嚴格意義上能夠取代Blueprint的緣由所在，這些很是不錯的小插件，包括對話框，下拉導航等等，不但功能完善，並且十分精緻，正在成爲衆多jquery項目的默認設計標準。

bootStrap之全局CSS樣式

1、概述

一、移動設備優先

基本的 HTML 元素都可以經過 class 設置樣式並獲得加強效果；還有先進的柵格系統；

Bootstrap 是移動設備優先的

經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感受

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

二、佈局容器

bootStrap爲頁面內容和柵格系統提供了一個佈局容器:container,提供了兩種，可是不能相互嵌套:

.container 類用於固定寬度並支持響應式佈局的容器

.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。

三、柵格類

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列

類的前綴: col-xs-(手機) col-sm(平板) col-md(桌面顯示器) col-lg(大桌面顯示器)

3.1 水平排列

 1 <div class="container" style="color: #ff0000;">
 2     <div class="row">
 3         <div class="col-lg-4">hello 大 </div>
 4         <div class="col-md-4">hello 中 </div>
 5         <div class="col-sm-4">hello 小 </div>
 6         <div class="col-xs-4">hello 超小 </div>
 7     </div>
 8 
 9 
10 <div class="row">
11     <div class="col-md-8">.col-md-8</div>
12     <div class="col-md-4">.col-md-4</div>
13 </div>
14 <div class="row">
15     <div class="col-md-4">.col-md-4</div>
16     <div class="col-md-4">.col-md-4</div>
17     <div class="col-md-4">.col-md-4</div>
18 </div>
19 </div>
20 
21 <div class="container-fluid">
22     <div class="row">
23         <div class="col-lg-4">4</div>
24         <div class="col-lg-8"> 8 </div>
25     </div>

3.2 是否不但願在小屏幕設備上全部列都堆疊在一塊兒？

1 <h1>你好，世界！</h1>
2 <div class="container">
3     <div class="row">
4         <div class="col-xs-12 col-sm-6 col-md-8" style="">手機全屏 平板一半 桌面8/12</div>
5         <div class="col-xs-6 col-md-4 " style="">手機一半 桌面4/12</div>
6     </div>
7 </div>

下圖爲最小狀態:網絡

下圖爲桌面狀態:

四、排版

 <div >
        <h1>h1. Bootstrap heading</h1>
        <h2>h2. Bootstrap heading</h2>

        <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
        <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
        <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
    </div>

經過lead類可讓段落突出顯示：

 1   <div >
 2         You can use the mark tag to <mark>highlight 高亮</mark> text.
 3         <hr/>
 4         <del>被刪除 This line of text is meant to be treated as deleted text.</del>
 5         <hr/>
 6         <s>無用This line of text is meant to be treated as no longer accurate.</s>
 7         <hr/>
 8         <ins>額外插入的文本This line of text is meant to be treated as an addition to the document.</ins>
 9         <hr/>
10         <u>帶下劃線的文本This line of text will render as underlined</u>
11         <hr/>
12         <small>小號文本his line of text is meant to be treated as fine print.</small>
13         <hr/>
14         <strong>強調一段endered as bold text</strong>
15         <hr/>
16         <em> 斜體 rendered as italicized text</em>
17         <hr/>
18         <p class="text-left">Left aligned text.</p>
19         <p class="text-center">Center aligned text.</p>
20         <p class="text-right">Right aligned text.</p>
21         <p class="text-justify">Justified text.</p>
22         <p class="text-nowrap">No wrap text.</p>
23 
24         <hr/>
25         改變大小寫
26         <p class="text-capitalize">
27         <p class="text-lowercase">所有小寫 Lowercased text.</p>
28         <p class="text-uppercase">所有大寫 Uppercased text.</p>
29         <p class="text-capitalize">首字母大寫 capitalized text.</p>
30 
31         <hr/>
32         縮略語
33         <abbr title="attribute">attr</abbr>
34         <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
35         <hr/>
36         <address>
37             <strong>Twitter, Inc.</strong><br>
38             795 Folsom Ave, Suite 600<br>
39             San Francisco, CA 94107<br>
40             <abbr title="Phone">P:</abbr> (123) 456-7890
41         </address>
42 
43         <hr/>
44         <address>
45             <strong>Full Name</strong><br>
46             <a href="mailto:#">first.last@example.com</a>
47         </address>
48 
49         <hr/>
50         <blockquote>
51             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
52         </blockquote>
53     </div>

引用:

 1 <div class="container">
 2     <blockquote>
 3         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 4     </blockquote>
 5 
 6     <blockquote>
 7         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 8         <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
 9     </blockquote>
10 
11     <blockquote class="blockquote-reverse">
12         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
13     </blockquote>
14 </div>

 1     無序列表
 2     <ul>
 3         <li>hello1</li>
 4         <li>hello2</li>
 5         <li>hello3</li>
 6         <li>hello4</li>
 7         <li>hello5</li>
 8     </ul>
 9 
10     水平列表
11     <ul class="list-inline">
12         <li>hello1</li>
13         <li>hello2</li>
14         <li>hello3</li>
15         <li>hello4</li>
16         <li>hello5</li>
17     </ul>
18 
19     有序列表
20     <ol >
21         <li>hello1</li>
22         <li>hello2</li>
23         <li>hello3</li>
24         <li>hello4</li>
25         <li>hello5</li>
26     </ol>
27 
28     無格式
29     <ol class="list-unstyled">
30         <li>hello1</li>
31         <li>hello2</li>
32         <li>hello3</li>
33         <li>hello4</li>
34         <li>hello5</li>
35     </ol>

 1     <dl>
 2         <dt>張忠磊</dt>
 3         <dd>世界上最牛逼的人</dd>
 4 
 5         <dt>張忠磊</dt>
 6         <dd>世界上最牛逼的人</dd>
 7 
 8         <dt>張忠磊</dt>
 9         <dd>世界上最牛逼的人</dd>
10 
11         <dt>張忠磊</dt>
12         <dd>世界上最牛逼的人</dd>
13 
14     </dl>
15 
16 
17 
18     <dl class="dl-horizontal">
19         <dt>張忠磊</dt>
20         <dd>世界上最牛逼的人</dd>
21 
22         <dt>張忠磊</dt>
23         <dd>世界上最牛逼的人</dd>
24 
25         <dt>張忠磊</dt>
26         <dd>世界上最牛逼的人</dd>
27 
28         <dt>張忠磊</dt>
29         <dd>世界上最牛逼的人</dd>
30 
31     </dl>

四、代碼app

 1  經過 code 標籤包裹內聯樣式的代碼片斷
 2     For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 3     <hr/>
 4     經過 kbd 標籤標記用戶經過鍵盤輸入的內容。=
 5     To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
 6     To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 7 
 8     <hr/>
 9     多行代碼能夠使用 pre 標籤。爲了正確的展現代碼，注意將尖括號作轉義處理。
10     <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
11 
12     <hr/>
13     經過 var 標籤標記變量
14     <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
15 
16     <hr/>
17     經過 samp 標籤來標記程序輸出的內容。
18     <samp>This text is meant to be treated as sample output from a computer program.</samp>