-
boostrap形狀圖片查看全部
-
如何編寫彈窗查看全部
-
彈出面板查看全部
-
jestrap.com是針對Bootstrap設計的開發工具查看全部
-
boostrap標題排版查看全部
-
boostrap下載地址查看全部
-
分辨率查看全部
-
3-4 bootstrap中的表格 全屏寬度帶水平線的表格.table 帶邊框的表格.table-bordered 條紋狀表格.table-striped 懸停變色表格.table-hover 緊湊風格表格.table-condensed 相應的行改色row class="info" 或active warning success 例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <table class="table table-striped table-border table-hover"> <tr><th>標題一</th><th>標題二</th><th>標題三</th><th>標題四</th><th>標題五</th></tr> <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr> <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr> <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr> <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr> <tr><td>內容一</td><td>內容二</td><td>內容三</td><td>內容四</td><td>內容五</td></tr> </table> </body> </html>查看全部
-
3-3 bootstrap 文本 <P>標簽:默認:14px;行高20px;底部外邊距:10px; 文本對齊:.text-left .text-lright .text-center <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <p class="text-left">文字左對齊</p> <p class="text-rightr">文字右對齊</p> <p class="text-center">文字居中對齊</p> </body> </html>查看全部
-
3-2bootstrap標題 bootstrap中的排版 bootstrap對默認的排版方式進行了CSS樣式定義,是的各種基本結構套用出來的HTML頁面更加美觀。 bootstrap中的排版--標題 標題(h1-h6/.h1-.h6)類為內聯元素賦予標題的樣式 副標題(small) 例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>標題一<small>小標題</small></h1> <h2>標題二</h2> <h3>標題三</h3> <h4>標題四</h4> <h5>標題五</h5> <h6>標題六</h6> <span class="h1">標題一</span> <span class="h2">標題二</span> <span class="h3">標題三</span> <span class="h4">標題四</span> <span class="h5">標題五</span> <span class="h6">標題六</span> </body> </html>查看全部
-
3-1 bootstrap的全局樣式 1.傳統前端開發過程中的 問題 重復、復雜、無意義的命名;結構冗余、胡亂嵌套;頁面錯亂 2.bootstrap全局樣式的特點 代碼整潔、風格統一、美觀易用;利用大量的全局樣式,基本的HTML元素均可通過class設置樣式并得到增強效果查看全部
-
2-3 bootstrap環境搭建 1.必須的文件 bootstrap.min.css bootstrap.min.js和jquery 2.簡單例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div class="text-center"> <h1>Hello World!</h1> <button type="button" class="btn btn-primary btn-lg">我是按鈕,按我一下!</button> </div> </body> </html>查看全部
-
下載bootstrap 在www。bootcss。com中下載 用于生產環境的 bootstrap查看全部
-
2-1 bootstrap的環境搭建 1.特性 響應式設計 、柵格布局、完整的類庫、jQuery插件 、不同的使用場景 2.bootstrap開發工具 任何前端開發工具均可,專門針對bootstrap的開發工具 jetstrap,下載地址 jetstrap。com,可視化,直接拖拽 3.bootstrap下載地址 官方getbootstrap.com 中文www.bootcss.com查看全部
-
1-1bootstrap簡介 (1)bootstrap是twitter公司開發基于HTML\CSS\javascript 的前端框架 (2)為實現web應用程序快速開發提供的一套前端工具包 (3)響應式布局 (4)移動設備優先 目標:1)bootstrap全局樣式2)viewport的意義3)柵格化布局 4)字體、圖標 5)實現響應式布局開發查看全部
舉報
0/150
提交
取消