bootstrap常見class匯總及其他筆記


一.container 最外部容器

作用:對不同屏幕規定不同大小樣式寬度,並且設置15像素左右內邊距,居中

二.網格相關

row 行 使用行在水平方向創建一組列,設置左右15px外邊距,抵消外部容器container在兩側的15px留白。

col-*-*: 列 (第一個*可以為xs[超小]/sm[小型]/md[中型]/lg[大型]第二個*必須為12以內的[列數])

col-*-offset-* :列偏移(第一個*和上面一樣,第二個*范圍是1到11,表示把該列的左外邊距(margin)增加*列)

col-*-*-*:列排序(第一個*和上面一樣,第二個*可以為push[向右]/pull[向左],第三個*范圍是1到11[列數])

三.概述

1.使用Html5

2.移動先行之meta標簽<meta name='viewport' content='width=device-width initial-scale=1.0'>,通過添加user-scalable=no,禁用收放功能,用戶只能滾動屏幕。

即 <meta name='viewport' content='width=device-width initial-scale=1.0,maximum-scale=1.0,user-scalable=no'>

3.響應式圖片           為img元素添加class:img-responsive

4.排版鏈接相關,body的margin設為0,背景白色,默認字體Helvetica Neue、 Helvetica、 Arial 和 sans-serif,大小14px.line-height,1.4(20/14).

四.基礎排版

1.重新調整了標題h1到h6,大小以14px為系數

h1到h3,系數分別為2.6,2.15,1.7,上外邊距20px,下外邊距20px

h4到h6,系數分別為1.25,1,0.85,上外邊距10px,下外邊距10px

其余待續

2.表格

able:基本樣式(只有橫向分隔線)

table-*:表格樣式(*可以為striped[添加條紋]/bordered[添加邊框]/hover[啟用懸停]/condensed[更加緊湊])

tr/th/td 有active/success/info/warning/danger來改變背景顏色

將任意的table放在class為table-responsive的元素內,實現響應式表格

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM