常用樣式
表單樣式
常用外掛程式、元件
非前端開發人員初級**搭建框架?
對常用的前端元素和標籤提供美化後的樣式,並根據實際使用需要,增加了部分功能
主要作用在元素的class屬性中
定義在div中
container-fluid
將乙個容器分為12份,想佔幾份寫幾份
="container"
>
="row"
>
="col-md-4"
>
4 列<
/div>
="col-md-8"
>
8 列<
/div>
<
/div>
<
/div>
將相鄰元素隔開="container"
>
="row"
>
="col-md-4"
>
4 列<
/div>
="col-md-8"
>
8 列<
/div>
<
/div>
="row"
>
="col-md-2"
>
2 列<
/div>
="col-md-10"
>
10 列<
/div>
<
/div>
<
/div>
左右浮動
bootstrap提供了常用標籤的簡單美化後的效果,部分標籤直接覆蓋了原標籤,可以直接使用
同時部分元素也提供了補充標籤和樣式
補充樣式
補充說明
bootstrap同時提供 .h1~.h6以及 .small
補充樣式
footer:腳注
定義了一套類名,這裡稱其為強調類名,這些強調類都是通過顏色來表示強調
css中使用text-align來對齊文字,bs中有相似用法
bootstrap 根據平時的使用情形提供了六種形式的列表:( 普通列表、有序列表、去點列表、內聯列表、 描述列表、水平描述列表)
和原生標籤相比,最常用的是去點列表和內聯列表
附加樣式
提供了5中不同的樣式,用來展示不同的顏色
表單中常見的元素主要包括:文字輸入框、下拉選擇框、單選按鈕、複選按鈕、文字域和按鈕等
通用樣式
.form-control .input-lg(較大) .input-sm(較小)
="form-horizontal"
>
="form-group"
>
="email"
class
="control-label col-sm-2"
>郵箱<
/label>
="col-sm-10"
>
"email"
class
="form-control" placeholder=
"請輸入郵箱"
/>
<
/div>
<
/div>
="form-group"
>
="pwd"
class
="control-label col-sm-2"
>密碼<
/label>
="col-sm-10"
>
"pwd"
class
="form-control" placeholder=
"請輸入密碼"
/>
<
/div>
<
/div>
="form-group"
>
="col-sm-offset-2"
>
=" checkbox"
>
"checkbox"
/>記住密碼
<
/label>
<
/div>
<
/div>
<
/div>
="form-group"
>
="col-sm-offset-2 col-sm-10"
>
="btn btn-default"
>提交<
/button>
<
/div>
<
/div>
<
/form>
.form-contr="form-inline"
>
="form-group"
>
="email"
>郵箱<
/label>
"email"
class
="form-control" placeholder=
"請輸入郵箱"
/>
<
/div>
="form-group"
>
="pwd"
>密碼<
/label>
"pwd"
class
="form-control" placeholder=
"請輸入密碼"
/>
<
/div>
="form-group checkbox"
>
"checkbox"
/>記住密碼<
/label>
<
/div>
="form-group"
>
="btn btn-default"
>提交<
/button>
<
/div>
<
/form>
多行選擇設定:multiple=「multiple」
基礎樣式="form-control" rows=
"3">
<
/textarea>
附加樣式
通過不同的顏色來做不同的強調
其他型別的標籤轉為按鈕標籤使用
按鈕大小//提交按鈕
"submit"
class
="btn btn-default" value=
"input 標籤按鈕"
/>
//超連結
"##"
class
="btn btn-info"
>a 標籤按鈕<
/a>
//span元素
="btn btn-success"
>span 標籤按鈕<
/span>
//塊級元素
="btn btn-warning"
>div 標籤按鈕<
/div>
按鈕禁用
可用於展示商品等
. thumbnail
預設的 .panel 元件所做的只是設定基本的邊框(border)和內補(padding)來包含內容。
上面的那些會就寫點,不會就直接抄下面的就行
bootstrap 教程 | 菜鳥教程
初識前端 XML基礎
資料使用 工具類的使用 xml是一種文字標記語言,主要用來傳輸資料,現在用的應該算是不多了,不過之前在銀行間通訊的時候看到用的還是xml格式的資料 必須有且僅有乙個根元素 嚴格區分大小寫 屬性值用引號 雙引號或單引號 等號分開的名稱 值對 標記成對 空標記關閉 元素正確巢狀 pcdata 自定義實體...
前端框架 BootStrap
bootstrap是基於html5和css3開發的,它在jquery的基礎上進行了更為個性化的完善,形成一套自己獨有的 風格,並相容大部分jquery外掛程式。個人理解 可以使用bootstrap框架開發乙個響應式的頁面,可以同時使用與pc端,pad端和手機端,並且不影響瀏覽的效果。bootstra...
新手必看!Bootstrap前端框架 基礎介紹篇
一.什麼是bootstrap?二.bootstrap的優點 自bootstrap3起,框架包含了貫穿於整個庫的移動裝置優先的樣式 對移動裝置友好 只需具備html和css的基礎知識,就可開始學習 採用柵格布局 底層實現原理 查詢結合流體布局 js外掛程式優秀的地方在於,哪怕是不懂js的開發人員也可以...