python全棧學習--day57(響應式頁面-@media介紹,移動端單位介紹,Bootstrap學習)
1、響應式頁面-@media介紹
咱們爲何要寫自適應的頁面（響應式頁面）
衆所周知，電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來不錯，可是若是放到手機上的話，那可能就會亂的一塌糊塗，這時候怎麼解決呢？之前，能夠再專門爲手機定製一個頁面，當用戶訪問的時候，判斷設備是手機仍是電腦，若是是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問www.baidu.com就會跳轉到m.baidu.com，這樣作簡直就是費力不討好的活，因此聰明的程序員開發了一種自適應寫法，即一次開發，到處顯示！這究竟是一個什麼樣的神器東西呢，接下來就揭曉它的神祕面紗。javascript
CSS3 的 @media 查詢
定義和使用
使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。 當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面，這對調試來講是一個極大的便利。css
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
媒體類型（mediaType ） 類型有不少，在這裏不一一列出來了，只列出了經常使用的幾個。html
screen： 用於電腦屏幕，平板電腦，智能手機等。（最經常使用） speech 應用於屏幕閱讀器等發聲設備 媒體功能前端
media feature：html5
1.max-width:定義輸出設備中的頁面最大可見區域寬度java
2.min-width:定義輸出設備中的頁面最小可見區域寬度python
開始編寫響應式頁面
準備工做1：設置Meta標籤jquery
首先咱們在使用 @media 的時候須要先設置下面這段代碼，來兼容移動設備的展現效果：css3
|
1
|
<
meta
name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
這段代碼的幾個參數解釋：
width = device-width：寬度等於當前設備的寬度程序員
initial-scale：初始的縮放比例（默認設置爲1.0，即表明不縮放）
user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面）
準備工做2：加載兼容文件JS
由於IE8既不支持HTML5也不支持CSS3 @media ，因此咱們須要加載兩個JS文件，來保證咱們的代碼實現兼容效果：
|
1
2
3
4
|
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
|
準備工做3：設置IE渲染方式
默認爲最高(可選) 如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事情發生了，例如如今是IE9的瀏覽器，可是瀏覽器的文檔模式倒是IE8 爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的
|
1
|
<
meta
http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
|
ps:這段代碼後面加了一個chrome=1，若是用戶的電腦裏安裝了 chrome，就可讓電腦裏面的IE無論是哪一個版本的均可以使用Webkit引擎及V8引擎進行排版及運算，若是沒有安裝，就顯示IE最新的渲染模式。
代碼示例：
一、若是文檔寬度大於等於 1170px 則應用花括號內的樣式——修改body的背景顏色(background-color):
|
1
2
3
4
5
|
@media screen and (min-width: 1170px) {
body {
}
}
|
從上面的代碼能夠看出，媒體類型是屏幕（screen），使用 一個 and 鏈接後面的媒體功能，這裏寫的是 max-width:300px ，也就是說，當屏幕的最大寬度 大於於等於 1170px 的時候，就應用花括號裏面的樣式。
2.若是文檔寬度大於等於 992px 則應用花括號內的樣式——修改body的背景顏色(background-color):
|
1
2
3
4
5
|
@media screen and (min-width: 992px) {
body {
}
}
|
三、當文檔寬度大於等於 768px 而且小於等於992px （ width >=768 && width <=992）的時候顯示的樣式
|
1
2
3
|
@media screen and (min-width:768px) and (max-width:992px) {
/* CSS 代碼 */
}
|
須要注意的是：
不要被 min-width 和 max-width 所迷惑，初學者很容易誤覺得 min-width 的意思是小於xxx的時候才應用，然而這就陷入誤區了，其實它的意思是：當設置了 min-width 的時候，文檔的寬度若是小於設置的值，就不會應用這個區塊裏的CSS樣式，因此 min-width 它才能實現大於等於設置的值得時候，纔會應用區塊裏的CSS樣式，max-width 也是如此。
2、移動端單位介紹
前言
在頁面總體佈局中，頁面元素的尺寸大小（長度、寬度、內外邊距等）和頁面字體的大小也是重要的工做之一。一個合理設置，則會讓頁面看起來井井有條，重點鮮明，賞心悅目。反之，一個不友好的頁面尺寸和字體大小設置，則會增長頁面的複雜性，增長用戶對頁面理解的複雜性；甚至在當下訪問終端（iPhone、iPad、PC、Android…）層出不窮的今天，適應各式各樣的訪問終端，將成爲手中的一塊「燙手的山芋」。因此在近幾年，「九宮格」式的「流式佈局」再度迴歸。爲了提供頁面佈局，及其它的可維護性、可擴展性，咱們嘗試將頁面元素的大小，以及字體大小都設置爲相對值，再也不是孤立的固定像素點。使其能在父元素的尺寸變化的同時，子元素也能隨之適應變化。以及結合少許最新CSS3的@media查詢，來實現「響應式佈局」，bootstrap這類CSS框架大勢興起。
然而在CSS中，W3C文檔把尺寸單位劃爲爲兩類：相對長度單位和絕對長度單位
然而相對長度單位按照不一樣的參考元素，又能夠分爲字體相對單位和視窗相對單位
字體相對單位有：em、ex、ch、rem；
視窗相對單位則包含：vw、vh、vmin、vmax幾種
絕對定位則是固定尺寸，它們採用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，咱們使用最普遍的則是em、rem、px以及百分比（%）來度量頁面元素的尺寸。
px: 絕對（固定）單位
缺點：任何狀況下都是固定值，會致使佈局在不一樣尺寸下的設備錯位
%：相對定位（會有影響發生變化）相對於父級（自身）大小進行定位
缺點：能肯定範圍的仍是比較好計算的，對於不太好肯定值得地方很差使用百分比，而且會致使變形，高度通常很差控制
em: 相對定位 （會有影響發生變化） em=當前字體大小
缺點：會根據當前容器字體大小發生變化，假如每一個容器字體大小不一致，那麼計算會很是麻煩
rem
r==root
em=字體大小 font-size
rem 相對單位
只依賴於html字體大小
能夠認爲它沒啥缺點吧！反正我我的仍是挺喜歡的
動態的修改根元素的font-size：
須要經過js去控制：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/*得到頁面寬度後動態修改html上的fontsize
* 320爲iphone5設計稿下的頁面寬度，以下設置後頁面的頁面在iphone5等寬屏幕上html
* 的font-size會變爲20px，即 1rem = 100px 1px=0.05rem
* 因此設置元素尺寸的時候，若是測量設計稿 15px 則需設置尺寸爲 (0.05*15)rem = 0.75rem
*/
!(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
var width = docEle.clientWidth;
console.log(width)
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
};
win.addEventListener(evt, fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window));
|
將上面的文件引入到當前項目中，
代碼以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--設置IE渲染方式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--兼容移動設備的展現效果-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> -->
<!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/*最小屏幕是1170px >=*/
@media screen and (min-width: 1170px){
body{
background-color: red;
}
}
/*最小屏幕是992px,最大是1170px*/
@media screen and (min-width: 992px) and (max-width:1170px){
body{
background-color: green;
}
}
/*低於992px的屏幕*/
@media screen and (max-width: 992px) {
body{
background-color: yellow;
}
}
</style>
</head>
<body>
</body>
</html>
運行代碼看效果吧！！
2、jQuery補充
jquery除了我們上面講解的經常使用知識點以外，還有jquery 插件、jqueryUI知識點
jqueryUI 官網：
jqueryUI 中文網：
jquery插件內容包含
好比這個
http://www.jqueryui.org.cn/demo/5652.html
它是一個手風琴效果，用於移動端。
官網demo：
https://www.oschina.net/project/tag/273/jquery
裏面包含了jquery插件效果和實現代碼，你們能夠好好的玩一下了！
好比jquery-chart，連接地址：
https://www.oschina.net/project/tag/275/jquery-chart
效果以下：
在jquery編譯數組時，通常使用for循環。
jquery封裝了each方法，它也能夠用來遍歷數組
$.each()函數和 $(selector).each()是不同的，那個是專門用來遍歷一個jQuery對象。$.each()函數可用於迭代任何集合，不管是「名/值」對象（JavaScript對象）或數組。在迭代數組的狀況下，回調函數每次傳遞一個數組索引和相應的數組值做爲參數。（該值也能夠經過訪問this關鍵字獲得，可是JavaScript將始終將this值做爲一個Object ，即便它是一個簡單的字符串或數字值。）該方法返回其第一個參數，這是迭代的對象。
注意: $.each()函數會在內部檢索而且使用傳遞集合的 length屬性。 因此，若是集合有一個名爲length的屬性 - 好比 {bar: 'foo', length: 10} - 這個函數可能沒法正常工做。
|
1
2
3
|
$.each([52, 97], function(index, value) {
alert(index + ': ' + value);
});
|
這將產生兩個信息：
0: 52
1: 97
若是對象是做爲集合使用，回調函數每次傳遞一個鍵值對的：
|
1
2
3
4
5
6
7
|
var obj = {
"flammable": "inflammable",
"duh": "no duh"
};
$.each( obj, function( key, value ) {
alert( key + ": " + value );
});
|
再次，這將產生兩個信息：
flammable: inflammable
duh: no duh
咱們能夠在$.each()返回false來終止迭代。返回非false至關於一個循環中的continue語句，這意味着，它會當即跳出當前的迭代，轉到下一個迭代。
2、移動端單位介紹
前言
在頁面總體佈局中，頁面元素的尺寸大小（長度、寬度、內外邊距等）和頁面字體的大小也是重要的工做之一。一個合理設置，則會讓頁面看起來井井有條，重點鮮明，賞心悅目。反之，一個不友好的頁面尺寸和字體大小設置，則會增長頁面的複雜性，增長用戶對頁面理解的複雜性；甚至在當下訪問終端（iPhone、iPad、PC、Android…）層出不窮的今天，適應各式各樣的訪問終端，將成爲手中的一塊「燙手的山芋」。因此在近幾年，「九宮格」式的「流式佈局」再度迴歸。爲了提供頁面佈局，及其它的可維護性、可擴展性，咱們嘗試將頁面元素的大小，以及字體大小都設置爲相對值，再也不是孤立的固定像素點。使其能在父元素的尺寸變化的同時，子元素也能隨之適應變化。以及結合少許最新CSS3的@media查詢，來實現「響應式佈局」，bootstrap這類CSS框架大勢興起。
然而在CSS中，W3C文檔把尺寸單位劃爲爲兩類：相對長度單位和絕對長度單位
然而相對長度單位按照不一樣的參考元素，又能夠分爲字體相對單位和視窗相對單位
字體相對單位有：em、ex、ch、rem；
視窗相對單位則包含：vw、vh、vmin、vmax幾種
絕對定位則是固定尺寸，它們採用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，咱們使用最普遍的則是em、rem、px以及百分比（%）來度量頁面元素的尺寸。
px: 絕對（固定）單位
缺點：任何狀況下都是固定值，會致使佈局在不一樣尺寸下的設備錯位
%：相對定位（會有影響發生變化）相對於父級（自身）大小進行定位
缺點：能肯定範圍的仍是比較好計算的，對於不太好肯定值得地方很差使用百分比，而且會致使變形，高度通常很差控制
em: 相對定位 （會有影響發生變化） em=當前字體大小
缺點：會根據當前容器字體大小發生變化，假如每一個容器字體大小不一致，那麼計算會很是麻煩
rem
r==root
em=字體大小 font-size
rem 相對單位
只依賴於html字體大小
能夠認爲它沒啥缺點吧！反正我我的仍是挺喜歡的
頁面的單位是配合使用的，不是統一使用一種單位。
%通常用於容器
使用%，高度很差控制
em通常用來設置font-size和line-height
舉例：
3、Bootstrap學習
1、Bootstrap的介紹
凡是使用過Bootstrap的開發者，都不在意作這麼兩件事情：複製and粘貼。哈哈~，是的使用Bootstrap很是簡單，可是在複製粘貼以前，須要先對Bootstrap的用法一一熟悉以後咱們纔開始幹活！
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、javascript 的，它簡潔靈活，使得 Web 開發更加快捷。
它用於開發響應式佈局、移動設備優先的 WEB 項目
官方網址爲：
下面這些網站都是基於Bootstrap開發的。
2、bootstrap的下載
目前最新版本是4，可是此版本不夠穩定。目前大多數用的仍是v3.3.7版本。
下載連接以下：
https://v3.bootcss.com/getting-started/#download
下載生產環境的
若是使用npm安裝，使用以下命令
|
1
|
npm install bootstrap@3 --save
|
點擊下載網頁右測的基本模板
將下載的bootstrap解壓，獲得目錄bootstrap-3.3.7-dist，只要導入css目錄下的bootstrap.min.css文件便可。
基本代碼以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<
meta
http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<
meta
name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<
link
href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<
title
>Title</
title
>
</
head
>
<
body
>
<
h1
>你好，世界！</
h1
>
</
body
>
</
html
>
|
網頁訪問，效果以下：
使用谷歌瀏覽器打開，按f12打開控制檯，查看右側的樣式
發現h1已經被bootstrap從新定義了。bootstrap內部封裝了不少樣式，直接引用就可使用了，很是方便。bootstrap的源代碼，不建議修改。
全局 CSS 樣式
設置全局 CSS 樣式；基本的 HTML 元素都可以經過 class 設置樣式並獲得加強效果；還有先進的柵格系統。
佈局容器
Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套。
.container 類用於固定寬度並支持響應式佈局的容器。
|
1
2
3
|
<
div
class="container">
...
</
div
>
|
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<h1>你好，世界！</h1>
</div>
</body>
</html>
訪問網頁，發現container的寬度爲970，而且div作了居中效果。
.container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。
|
1
2
3
|
<
div
class="container-fluid">
...
</
div
>
|
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<h1>你好，世界！</h1>
</div>
</body>
</html>
訪問網頁，發現container的寬度爲1078，div是靠左邊的。
柵格系統
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。
網頁尺寸的黃金比例：960 Grid System(網格設計)
960 Grid System是使用固定寬度960pixel(像素)置中對齊畫面的方式呈如今網頁上，去除左右兩邊各10pixel的空間，留下中間940pixel的區塊以20pixel做爲間隔分欄。在空間設計上，可隨意合併多欄做爲版面配置及網頁尺寸的設定，合併出來的欄寬也不會有畸零數，有利於CSS中DIV寬度的設定。
找到這個頁面，它是12列的，點擊show grid(格子)
有12列，它的寬度是同樣的，格子之間的間距也是同樣的。
這樣看起來，就是一個黃金對稱比例。網頁縮放時，不會影響佈局。
主流的網頁，都是採用12列架構的。上面的網頁只是一種表現形式，還有其餘的12列表現形式。
好比這個
簡介
柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。
柵格參數
經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。
| 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
|---|---|---|---|---|
| 柵格系統行爲 | 老是水平排列 | 開始是堆疊在一塊兒的，當大於這些閾值時將變爲水平排列C | ||
.container 最大寬度 |
None （自動） | 750px | 970px | 1170px |
| 類前綴 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）數 | 12 | |||
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
| 槽（gutter）寬 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
實例：從堆疊到水平排列
使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。
簡介
柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。
柵格參數
經過下表能夠詳細查看 Bootstrap 的柵格系統是如何在多種屏幕設備上工做的。
| 超小屏幕 手機 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面顯示器 (≥992px) | 大屏幕 大桌面顯示器 (≥1200px) | |
|---|---|---|---|---|
| 柵格系統行爲 | 老是水平排列 | 開始是堆疊在一塊兒的，當大於這些閾值時將變爲水平排列C | ||
.container 最大寬度 |
None （自動） | 750px | 970px | 1170px |
| 類前綴 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）數 | 12 | |||
| 最大列（column）寬 | 自動 | ~62px | ~81px | ~97px |
| 槽（gutter）寬 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
實例：從堆疊到水平排列
使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。</div>
<div class="col-lg-3 col-md-4 col-sm-6">「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。</div>
<div class="col-lg-3 col-md-4 col-sm-6">「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。</div>
</div>
</div>
</body>
</html>
訪問網頁，
縮小屏幕，剛開始是顯示3列，慢慢的縮小屏幕，顯示2個，到最後，顯示1個。
內容部分，能夠本身寫樣式來修飾，若是樣式和bootstrap衝突了，以本身寫的樣式爲準。
表單
基本實例
單獨的表單控件會被自動賦予一些全局樣式。全部設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
<form>
<div class="form-group">
<label for="username">用戶名</label>
<input type="text" class="form-control" id="username" placeholder="請輸入用戶名">
</div>
<div class="form-group">
<label for="pwd">密碼</label>
<input type="password" class="form-control" id="pwd" placeholder="請輸入密碼">
</div>
<button type="submit" class="btn btn-info">註冊</button>
</form>
</div>
</div>
</body>
</html>
訪問網頁，效果以下：
若是想container類的樣式，不要修改源代碼，而是在container 後面加入自定義的類，好比bootstrap官網
其中projects，就是自定義的類
排版
標題
HTML 中的全部標題標籤，<h1> 到 <h6> 都可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</div>
</div>
</body>
</html>
訪問網頁：
內聯文本元素
Marked text
For highlighting a run of text due to its relevance in another context, use the <mark> tag.
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
You can use the mark tag to <mark>highlight</mark> text.
</div>
</div>
</body>
</html>
訪問網頁：
小號文本
對於不須要強調的inline或block類型的文本，使用 <small> 標籤包裹，其內的文本將被設置爲父容器字體大小的 85%。標題元素中嵌套的 <small> 元素被設置不一樣的 font-size 。
你還能夠爲行內元素賦予 .small 類以代替任何 <small> 元素。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
<p class="small">
對於不須要強調的inline或block類型的文本，使用small標籤包裹，其內的文本將被設置爲父容器字體大小的 85%。標題元素中嵌套的small元素被設置不一樣的 font-size 。
</p>
</div>
</div>
</body>
</html>
訪問網頁：
對齊
經過文本對齊類，能夠簡單方便的將文字從新對齊。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
</div>
</div>
</body>
</html>
訪問網頁：
改變大小寫
經過這幾個類能夠改變文本的大小寫。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="col-lg-3 col-md-4 col-sm-6">
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
</div>
</body>
</html>
範圍網頁：
有序列表
順序相當重要的一組元素。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
<!--list-unstyled表示去除默認樣式-->
<ul class="list-unstyled">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
訪問網頁：
代碼
內聯代碼
經過 <code> 標籤包裹內聯樣式的代碼片斷。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
<p>For example, <code><section></code> should be wrapped as inline.</p>
</div>
</div>
</body>
</html>
訪問網頁：
表格
基本實例
爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線。這種方式看起來不少餘！？可是咱們以爲，表格元素使用的很普遍，若是咱們爲其賦予默認樣式可能會影響例如日曆和日期選擇之類的插件，因此咱們選擇將此樣式獨立出來。
條紋狀表格
經過 .table-striped 類能夠給 <tbody> 以內的每一行增長斑馬條紋樣式。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>韓雪</td>
<td>18</td>
</tr>
<tr class="info">
<td>唐嫣</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
訪問網頁：
帶邊框的表格
添加 .table-bordered 類爲表格和其中的每一個單元格增長邊框。
鼠標懸停
經過添加 .table-hover 類可讓 <tbody> 中的每一行對鼠標懸停狀態做出響應。
緊縮表格
經過添加 .table-condensed 類可讓表格更加緊湊，單元格中的內補（padding）均會減半。
狀態類
經過這些狀態類能夠爲行或單元格設置顏色。
| Class | 描述 |
|---|---|
.active |
鼠標懸停在行或單元格上時所設置的顏色 |
.success |
標識成功或積極的動做 |
.info |
標識普通的提示信息或動做 |
.warning |
標識警告或須要用戶注意 |
.danger |
標識危險或潛在的帶來負面影響的動做 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>韓雪</td>
<td>18</td>
</tr>
<tr class="info">
<td>唐嫣</td>
<td>20</td>
</tr>
<tr class="warning">
<td>劉詩詩</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
網頁效果：
響應式表格
將任何 .table 元素包裹在 .table-responsive 元素內，便可建立響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。
必須在table標籤父級元素設置，好比div
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6 table-responsive" >
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>韓雪</td>
<td>18</td>
</tr>
<tr class="info">
<td>唐嫣</td>
<td>20</td>
</tr>
<tr class="warning">
<td>劉詩詩</td>
<td>20</td>
</tr>
<tr class="danger">
<td>戚薇，1984年10月26日出生於四川省成都市武侯區，中國內地女演員、歌手，畢業於浙江傳媒學院錄音藝術專業。</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
訪問網頁：
組件
無數可複用的組件，包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能。
實例
能夠把它們應用到按鈕、工具條中的按鈕組、導航或輸入框等地方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--適用於移動設備，禁止頁面縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="col-md-6">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
</div>
</div>
</body>
</html>
訪問網頁：
導航
Bootstrap 中的導航組件都依賴同一個 .nav 類，狀態類也是共用的。改變修飾類能夠改變樣式。
- 1. python 全棧開發，Day57(響應式頁面-@media介紹,jQuery補充,移動端單位介紹,Bootstrap學習)
- 2. 響應式頁面@media介紹和移動端單位介紹
- 3. 響應式頁面-@media介紹, 移動端單位介紹 Bootstrap學習 Bootstrap的插件
- 4. 01 響應式頁面-@media介紹,
- 5. 移動端單位介紹
- 6. 14,前端-animate.css-jquery插件介紹-@media媒體查詢-移動端單位-bootstrap
- 7. 02-移動端單位介紹
- 8. Python學習(002)--Python介紹
- 9. 【PyTorch學習】全方位介紹Tensor
- 10. 單頁面應用介紹
- 更多相關文章...
- • 網站主機 介紹 - 網站主機教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. python 全棧開發，Day57(響應式頁面-@media介紹,jQuery補充,移動端單位介紹,Bootstrap學習)
- 2. 響應式頁面@media介紹和移動端單位介紹
- 3. 響應式頁面-@media介紹, 移動端單位介紹 Bootstrap學習 Bootstrap的插件
- 4. 01 響應式頁面-@media介紹,
- 5. 移動端單位介紹
- 6. 14,前端-animate.css-jquery插件介紹-@media媒體查詢-移動端單位-bootstrap
- 7. 02-移動端單位介紹
- 8. Python學習(002)--Python介紹
- 9. 【PyTorch學習】全方位介紹Tensor
- 10. 單頁面應用介紹