PHP全站開發工程師-第4章 Bootstrap 基礎屬性
第一階段B（前端框架）11天 64學時
第4章 Bootstrap 基礎屬性（12）
[學習課時] 本章共需要學習 12 課時
[目的要求]
- 掌握Bootstrap網格排版
- 掌握Bootstrap表格列表屬性
- 掌握Bootstrap圖文排版
- 掌握Bootstrap輔助屬性
- 掌握Bootstrap標籤屬性
- 掌握Bootstrap表格樣式
- 掌握Bootstrap字型圖示
[教學內容]
Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的
- 移動裝置優先
移動裝置優先是 Bootstrap 3 的最顯著的變化。
為了讓 Bootstrap 開發的網站對移動裝置友好，確保適當的繪製和觸屏縮放，需要在網頁的 head 之中新增 viewport meta 標籤，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width ：控制裝置的寬度。為了在不同螢幕解析度的裝置瀏覽，設定為 device-width。
- initial-scale=1.0 - 確保網頁載入時，以 1:1 的比例呈現，不會有任何的縮放。
- user-scalable=no - 可以禁用其縮放（zooming）功能。
- maximum-scale=1.0 - 與user-scalable=no 一起使用。這樣禁用縮放功能後，使用者只能滾動螢幕，能讓網站看上去更像原生應用的感覺。這種方式我們並不推薦所有網站使用，還是要看您自己的情況而定！
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no"
>
- Bootstrap 瀏覽器/裝置支援
Bootstrap 可以在最新的桌面系統和移動端瀏覽器中很好的工作。
舊的瀏覽器可能無法很好的支援。
|
Chrome |
Firefox |
IE |
Opera |
Safari |
|
|
Android |
YES |
YES |
不適用 |
不適用 |
不適用 |
|
iOS |
YES |
不適用 |
不適用 |
不適用 |
YES |
|
Mac OS X |
YES |
YES |
不適用 |
YES |
YES |
|
Windows |
YES |
YES |
YES* |
YES |
不適用 |
Bootstrap 安裝
- 下載 Bootstrap:
您可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本
- Download Bootstrap：預編譯的壓縮版本。不包含文件和最初的原始碼檔案。
- Download Source：下載原始碼。未壓縮。
下載完成後，將如下檔案複製到專案即可。
Bootstrap 網格系統
Bootstrap 3 是移動裝置優先的，在這個意義上，Bootstrap 程式碼從小螢幕裝置（比如移動裝置、平板電腦）開始，然後擴充套件到大螢幕裝置（比如膝上型電腦、臺式電腦）上的元件和網格。
- 移動裝置優先策略
- 內容
- 決定什麼是最重要的。
- 佈局
- 優先設計更小的寬度。
- 基礎的 CSS 是移動裝置優先，媒體查詢是針對於平板電腦、臺式電腦。
- 漸進增強
- 隨著螢幕大小的增加而新增元素。
響應式網格系統隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。
|
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
|
4 |
4 |
4 |
|||||||||
|
4 |
8 |
||||||||||
|
6 |
6 |
||||||||||
|
12 |
|||||||||||
- 網格選項
|
超小裝置手機（<768px） |
小型裝置平板電腦（≥768px） |
中型裝置臺式電腦（≥992px） |
大型裝置臺式電腦（≥1200px） |
|
|
最大寬度 |
None (auto) |
750px |
970px |
1170px |
|
Class字首 |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
|
列數量和 |
12 |
12 |
12 |
12 |
|
最大列寬 |
Auto |
60px |
78px |
95px |
|
間隙寬度 |
30px（一個列的每邊分別 15px） |
30px（一個列的每邊分別 15px） |
30px（一個列的每邊分別 15px） |
30px（一個列的每邊分別 15px） |
Bootstrap 排版
- 標題
例項：demo01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css"/>
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>我是標題1 h1. <small>我是副標題1 h1</small></h1>
<h2>我是標題2 h2. <small>我是副標題2 h2</small></h2>
<h3>我是標題3 h3. <small>我是副標題3 h3</small></h3>
<h4>我是標題4 h4. <small>我是副標題4 h4</small></h4>
<h5>我是標題5 h5. <small>我是副標題5 h5</small></h5>
<h6>我是標題6 h6. <small>我是副標題6 h6</small></h6>
</body>
</html>
效果圖
- 文字排版
例項：demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css"/>
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<small>本行內容是在標籤內</small><br>
<strong>本行內容是在標籤內</strong><br>
<em>本行內容是在標籤內，並呈現為斜體</em><br>
<p class="text-left">向左對齊文字</p>
<p class="text-center">居中對齊文字</p>
<p class="text-right">向右對齊文字</p>
<p class="text-muted">本行內容是減弱的</p>
<p class="text-primary">本行內容帶有一個 primary class</p>
<p class="text-success">本行內容帶有一個 success class</p>
<p class="text-info">本行內容帶有一個 info class</p>
<p class="text-warning">本行內容帶有一個 warning class</p>
<p class="text-danger">本行內容帶有一個 danger class</p>
</body>
</html>
效果圖
Bootstrap 表格
|
類 |
描述 |
|
.table |
為任意 <table> 新增基本樣式 (只有橫向分隔線) |
|
.table-striped |
在 <tbody> 內新增斑馬線形式的條紋 ( IE8 不支援) |
|
.table-bordered |
為所有表格的單元格新增邊框 |
|
.table-hover |
在 <tbody> 內的任一行啟用滑鼠懸停狀態 |
|
.table-condensed |
讓表格更加緊湊 |
<tr>, <th> 和 <td> 類
下表的類可用於表格的行或者單元格：
|
類 |
描述 |
|
.active |
將懸停的顏色應用在行或者單元格上 |
|
.success |
表示成功的操作 |
|
.info |
表示資訊變化的操作 |
|
.warning |
表示一個警告的操作 |
|
.danger |
表示一個危險的操作 |
案例：demo03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../../src/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../../src/css/font-awesome.min.css" />
<script src="../../src/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../src/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
height: 45px;
line-height: 45px;
}
#header {
height: 60px;
line-height: 60px;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
#footer {
position: fixed;
width: 100%;
height: 100%;
top: 60px;
}
.left {
background-color: rgba(255, 0, 0, 0.1);
}
.right {
height: 100%;
background-color: rgba(0, 255, 0, 0.1);
}
.content {
height: 100%;
overflow: overlay;
}
</style>
</head>
<body>
<div id="header">
Bootstrap 網格系統展示
</div>
<div id="footer">
<div class="col-xs-2 left hidden-xs">
<ul>
<li>選單1</li>
<li>選單1</li>
<li>選單1</li>
</ul>
</div>
<div class="col-sm-10 col-xs-12 right">
<div class="content">
<table class="table table-condensed">
<caption>詳細資訊</caption>
<tr>
<th>姓名</th>
<th>性別</th>
<th>電話</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>13592768987</td>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>13592768987</td>
</tr>
相關推薦
PHP全站開發工程師-第4章 Bootstrap 基礎屬性
第一階段B（前端框架）11天 64學時 第4章 Bootstrap 基礎屬性（12） [學習課時] 本章共需要學習 12 課時 [目的要求] 掌握Bootstrap網格排版 掌握Bootstrap表格列表屬性 掌握Bootstrap圖文排版 掌握
PHP全站開發工程師-第14章 JavaScript DOM物件和BOM物件
第一階段（A）（前端） 20天 120學時 第14章 JavaScript DOM物件和BOM物件（6） [學習課時] 本章共需要學習 6 課時 [目的要求] 掌握JavaScript DOM物件 掌握JavaScript BOM物件 [教學內容
Java開發工程師(Web方向) - 01.Java Web開發入門 - 第4章.Maven
編譯器 靜態資源 重復 mvn clean art servle 技術 工具 環境 第4章--Maven Maven實戰 Java Web應用的部署： 手動式： 編譯：javac -cp $CATALINA_HOME/lib/servlet-api.jar web-inf/
路飛學城-Python開發集訓-第4章
避免 開源 .py 所有 一個 pip 註意 ren rom 學習心得： 學習筆記： 模塊好處： 1、提高可維護性 2、可重用 3、避免函數名和變量名沖突 模塊分為三種： 1、內置標準模塊（標準庫），查看所有自帶和第三方模塊總數的方法：help("modules")
第4章 NumPy基礎
浮點數 線性代數 多維數組 部分 量算 容器 屬性 strong inf NumPy是高性能科學計算和數據分析的基礎包。 主要功能： 1、ndarray，一個具有矢量算術運算和復雜廣播能力的快速且節省空間的多維數組。 2、用於對整組數據進行快
資料基礎---《利用Python進行資料分析·第2版》第4章 NumPy基礎：陣列和向量計算
之前自己對於numpy和pandas是要用的時候東學一點西一點，直到看到《利用Python進行資料分析·第2版》，覺得只看這一篇就夠了。非常感謝原博主的翻譯和分享。 NumPy（Numerical Python的簡稱）是Python數值計算最重要的基礎包。大多數提供科學計算的包都是用Nu
Java程式設計師面試寶典筆記記錄-第4章Java基礎部分(下）
導言 本次博文對何昊出版的《java程式設計師面試寶典》的第四章關於Java一部分基礎知識(4.7-4.10)的概括筆記，刪除其中部分程式碼，試題和一部分相對簡單的內容題目。 相關題目 Java
第4章 NumPy基礎：陣列和向量計算
參考 目錄 NumPy（Numerical Python的簡稱）是Python數值計算最重要的基礎包。大多數提供科學計算的包都是用NumPy的陣列作為構建基礎。 NumPy的
Python從小白到大牛 — 第4章 語法基礎
4.1.1 識別符號和關鍵字 識別符號規則 1、區分大小寫 2、首字元可以是下劃線 “_" 或字母，但不能是數字 3、關鍵字不作為識別符號 4、不能用python內建函式作為自己的識別符號 4.1.2 Python 關鍵字 and
前端開發工程師 - 01.頁面制作 - 第4章.CSS
組合選擇器 gre button 字母 family 屬性選擇器 次數 規則 clas 第4章.CSS CSS簡介 Cascading Style Sheet 層疊樣式表：定義頁面中的表現樣式 history： CSS1(1996)--CSS2(1998)--著手CSS3草
Java開發工程師(Web方向) - 03.數據庫開發 - 第4章.事務
完成 工作單元 ima auto 增加 並發執行 trace driver transfer 第4章--事務 事務原理與開發 事務Transaction： 什麽是事務？ 事務是並發控制的基本單位，指作為單個邏輯工作單元執行的一系列操作，且邏輯工作單元需滿足ACID特性。
Java開發工程師(Web方向) - 01.Java Web開發入門 - 第6章.蜂巢
多個 計算 margin style 打包 工程 自動 後端服務 運行 第6章--蜂巢 蜂巢簡介 網站開發完，就需要測試、部署、在服務器上運行。 網易蜂巢： 采用Docker容器化技術的雲計算平臺 https://c.163.com 容器管理：容器可被視作為雲主機的服務器
4類Storage方案（AS開發實戰第四章學習筆記）
uil sed base 改變 查詢語句 class getc tex dcim 4.1 共享參數SharedPreferences SharedPreferences按照key-value對的方式把數據保存在配置文件中，該配置文件符合XML規範，文件路徑是/data/
一個人開發一個產品，小程式從0到1，第4章 頁面檔案
一個小程式應用，由index，logs等多個頁面組成。一個頁面，包含4個同名，不同字尾的檔案，它們分別是負責配置的json，佈局的wxml，樣式的wxss和業務邏輯的js。其中，wxml和js是不可刪除，是必須有的檔案。 4.1 index.json 每一個小程式頁面也可以使用.json檔案來對本頁面的視窗表
linux就該這麽學-第4章 寫入、轉義、單引號、別名、全局變量
http ima src com 分享 全局變量 .com 文件 nbsp 一、寫入 1、> 清空寫入文件 2.>>追加寫入文件 3.2>>錯誤追加寫入文件 二、轉義 linux就該這麽學-第4章 寫入、轉義、單引號、別名、全局變量
軟件工程過程 第4章 瀑布模型應用實例
系統設計 負責人 color 準備工作 準備 結構 輸出 有效 報告 1.Infosys 過程模型如下圖所示：P82 包括需求規範、高層設計、詳細設計、構建、單元測試、集成測試計劃、集成測試、系統測試計劃、系統測試、文檔化、驗收測試、安裝和維護支持。
第4章 數據鏈路層（4）_擴展以太網
style 由於 crc prior 運行 選擇 兩個 需要 指定端口 4. 擴展以太網 4.1 集線器（hub） （1）集線器組網 ①10BASE-T雙絞線以太網的通信距離短，每個站到集線器的距離不超過100m（註意，10表示10Mb/s的數據傳輸率，BASE表示連接
第4章 數據鏈路層（5）_高速以太網
網絡 1.3 cell 增加 pan ble 雙工 網段 數據鏈路 5. 高速以太網 5.1 100M以太網 快速以太網（100M）標準 名稱 傳輸介質 網段最大長度 特點 100BASE-TX 銅纜 100m 兩對UTP5類線或屏
CoolBlog開發筆記第4課:數據庫模型設計
的人 model類 set 來看 aid 想想 目錄 targe init 教程目錄 1.1 CoolBlog開發筆記第1課:項目分析 1.2 CoolBlog開發筆記第2課:搭建開發環境 1.3 CoolBlog開發筆記第3課:創建Django應用 前言 我新書《