20131108 boot strap-basiccss By Randy

195 views

Published on

bootstrap basic css by Randy

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
195
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20131108 boot strap-basiccss By Randy

  1. 1. BOOTSTRAP-BASICCSS
  2. 2. 大綱  排版  表格  按鈕  圖片、圖示
  3. 3. font-size 排版 段落突出: lead 對齊:text-left、text-center、text-right 顏色強調: muted、text-warning、text-error、text-info、text-success
  4. 4. font-size 排版 initialism : 搭配abbr使用,讓字體變小並轉為大寫 pull-right: float: right; pull-left: float: left unstyled: 移除無序列表的樣式、margin-left: 0: Inline: 搭配ul、ol使用 讓列表display改為inline-block 讓padding-left , padding-right : 5px;
  5. 5. font-size 排版 dl-horizontal : 搭配dl dt dd 使用 pre-scrollable :搭配 pre使用 設定height: 350px 並出現scroll-bar
  6. 6. font-size .table-striped 表格 table : table-striped: 於tbody加入斑馬條紋 table-bordered: 為table增加圓角、邊框
  7. 7. font-size .table-striped 表格 table-hover : table-condensed: 減少每個td的padding,讓table緊密 Success、error、warning、info: 改變 table中 tr 的背景顏色
  8. 8. font-size 按鈕 btn、btn btn-primary、btn btn-info、btn btn-success btn btn-danger、btn btn btn-inverse、btn btn btn-link btn-large、btn-small、btn-mini btn-block disabled:沒有對button tag 加入真的disabled屬性
  9. 9. font-size 圖片、圖示 Img-rounded、img-circle、img-polaroid 圖示需要依附於<i></i>,搭配其他tag使用的樣子: 無序列表 a搭配btn

×