使用bootstrap的準備工作? ? ? ??
a)引入meta標簽,為了移動端? ? ? ??
b)引入jq? ? ??
? c)引入bootstrap的css和js文件
除了柵格系統(tǒng)的css部分? ??
1、當引入文件后會給頁面默認加東西? ? ? ??
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;? ? ? ?
?font-size: 14px;? ? ? ?
?line-height: 1.42857143;? ? ? ??
color: #333;? ?
?2、標題? ? ? ??
重寫了h1到h6? ? ? ??
還提供了h1-h6的class名? ? ? ?
?小標題<small>
還提供了small類
3赡译、內(nèi)聯(lián)文本元素 *? ? ? ?
?高亮<mark> ? ?也加了mark的類? ? ? ??
被刪除的文本<del> <s>
帶下劃線的文本,<ins> <u>
小號文本<small>父級字體大小的85%? ? ??
? 著重<string>
斜體<em>
對齊:text-left|right|center|justify|nowrap? ? ? ? ? ? ??
? ? ? ? ? ?文本對齊方式 ? ? ? ?兩端對齊不換行 ?
文本大小寫? ? ? ? ? ??
轉(zhuǎn)小寫text-lowercase? ? ? ? ? ??
轉(zhuǎn)大寫text-uppercase? ? ? ? ? ??
首字母大寫text-capitalize? ? ? ??
基本縮略語attr結(jié)合title使用? ? ? ??
首字母縮略語HTML結(jié)合title使用? ? ? ?
?地址<address>
4矮男、列表? ? ? ??
清除列表樣式 list-unstyled? ? ? ?
?讓li變成行內(nèi)快? list-inline? ?
?5槐秧、表格? ***? ? ? ? ?
?a)去掉了一些默認樣式,邊距? ? ? ? ?
?b)table里面加.table 會加上下邊掖蛤,會自適應? ? ? ? ??
c)在table里面加table-bordered 四周都有邊框? ? ? ? ?
?d)table-striped? 條紋狀表格? ? ? ? ??
?e)table-hover? ? 鼠標懸停? ? ? ? ?
?f)table-condensed? 緊湊型? ? ? ? ?
?g).active 是給tr加的? 鼠標懸停的轉(zhuǎn)臺? 灰色? ? ? ? ? ?
? ? .success標識成功或積極的動作? ? 綠色? ? ? ? ? ?
? ? .info標識普通的提示信息或動作? ? 藍色? ? ? ? ? ?
? ? .warning標識警告或需要用戶注意? 橙色? ? ? ? ?
?? .danger? ? 危險? ? ? ? ? ? ? ? ? ? 紅色? ??
6杀捻、表單? ? ? ??
文本元素 加? form-control? 讓點擊的時候有陰影?
?7、按鈕? ** ? ? ? ??
? ? ? ? 最好用這兩個蚓庭、當然也可以用input
? ? ? ? 如果想用必須先加上 .btn
? ? ? ? a的話務必加上role="button"
? ? ? ? 默認按鈕? btn-default
? ? ? ? 首選項? btn-primary
? ? ? ? 成功? ? btn-success
? ? ? ?提示信息? btn-info
? ? ? ?警告? ? btn-warning
? ? ? ?危險? ? btn-danger
? ? ? ?鏈接? ? btn-link
? ? ? 大號? ? .btn-lg
? ? ? 小號? ? .btn-sm
? ? ? 超小號? .btn-xs
8致讥、圖片 **
? ? ? ? ? ? ? 給圖片加class img-responsive 圖片會自適應
? ? ? ? ? ? ? ?img-rounded? ? 圓角
? ? ? ? ? ? ? ?img-circle? ? ? 圓形
? ? ? ? ? ? ? ?img-thumbnail? 邊框
9、輔助類***
? ? ? ? ?a器赞、情境文本顏色? 給文字變色
? ? ? ? ? b垢袱、caret 小三角
? ? ? ? ?c、close ×? 默認在右上角
? ? ? ? d港柜、快速浮動:pull-left pull-right
? ? ? ? ? ? ? ? ? ? ? ? ? ?清除浮動? clearfix