Boostrate之CSS介紹

Boostrate 是一個非常受歡迎的前端開發框架，其強大之處在於對常見的css佈局小組件和JavaScript插件都進行了完整而且完善的封裝。我們可以對現有插件進行二次擴展，最後開發出自己的完整插件。總結下：需要了解boostrate的思想理念。看看它設置了什麼，方便記憶。小圖標的基本用法身份簡單，在內聯元素上應用對應的樣式即可。如<li class = “glyphicon glyphicon-search”><span class = “glyphicon glyphicon-search”>實現方式：使用CSS3中@font-face特性，將服務器上字體設置爲web字體@font-face { font-family: 'Glyphicons Halflings'; //自定義的字體名稱 src: url('../fonts/glyphicons-halflings-regular.eot');//存放路徑，字體格式src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}①.nav基礎樣式 佈局方式（相對）、塊級顯示、padding、active、disable狀態下等①②nav-tab選項卡導航 設置li定義非高亮顯示和高亮顯示樣式和鼠標觸發行爲。③nav-pills膠囊式選項卡 風格加大圓角設置，背景色④nav-stacked堆疊式導航 在③基礎上面，默認不設置浮動，垂直襬放，可以設置nav-divider分隔符⑤nav-justified自適應導航 將li元素充滿整個父容器，只需要在②或③後面添加即可⑥dropdown二級導航 在②或③中的li中加入⑥，區別是②中有邊框而③沒有，③四個邊框有圓角而②左下和右上沒有圓角。⑤無特殊設置。①//boostrap.css源碼分析.nav { padding-left: 0; margin-bottom: 0; list-style: none; //消除list圓點}.nav > li { position: relative; //所有菜單項都是相對定位 display: block; //塊級顯示}.nav > li > a { position: relative; //a鏈接相對定位 display: block; //塊級顯示 padding: 10px 15px; //外邊距略大}.nav > li > a:hover,.nav > li > a:focus { text-decoration: none; background-color: #eee; }//移動或焦點時處理.nav > li.disabled > a { color: #777;} color: #777; .nav > li.disabled > a:hover,.nav > li.disabled > a:focus { text-decoration: none;cursor: not-allowed; background-color: transparent;}//禁用時處理方式.nav .open > a,.nav .open > a:hover,.nav .open > a:focus { background-color: #eee; border-color: #337ab7;}.nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}.nav > li > a > img { max-width: none;//不限制a 鏈接中的圖片寬度}②.nav-tabs { border-bottom: 1px solid #ddd;//所有菜單下都有橫線，整體導航爲水平方向}.nav-tabs > li { float: left; margin-bottom: -1px;}.nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; //透明邊框 border-radius: 4px 4px 0 0; //每個菜單項上面都有圓角}.nav-tabs > li > a:hover { border-color: #eee #eee #ddd; //非高亮，菜單項在鼠標觸發時的背景顏色}.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus { color: #555; cursor: default; background-color: #fff; //高亮狀態下，背景顏色爲白色 border: 1px solid #ddd; border-bottom-color: transparent; //高亮狀態下，橫線爲透明，不顯示}③.nav-pills > li { float: left;}.nav-pills > li > a { border-radius: 4px; //圓角設置}.nav-pills > li + li { margin-left: 2px; // 加大左外邊距} .nav-pills > li.active > a,.nav-pills > li.active > a:hover,.nav-pills > li.active > a:focus { color: #fff; background-color: #337ab7;}//高亮菜單設置背景和顏色，文字白色，背景爲藍色④.nav-stacked > li { float: none; //不設置浮動}.nav-stacked > li + li { margin-top: 2px; //設置兩個li之間的top值 margin-left: 0;} .nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}⑤.nav-tabs.nav-justified { width: 100%;//寬度充滿這個父容器 border-bottom: 0;}.nav-tabs.nav-justified > li { float: none;//取消浮動}.nav-tabs.nav-justified > li > a { margin-bottom: 5px; text-align: center;}.nav-tabs.nav-justified > .dropdown .dropdown-menu { top: auto; left: auto;}//自適應小分辨率下可以多行顯示@media (min-width: 768px) { .nav-tabs.nav-justified > li { display: table-cell;//表格風格顯示 width: 1%; }} .nav-tabs.nav-justified > li > a { margin-bottom: 0; }.nav-tabs.nav-justified > li > a { margin-right: 0; border-radius: 4px;}.nav-tabs.nav-justified > .active > a,.nav-tabs.nav-justified > .active > a:hover,.nav-tabs.nav-justified > .active > a:focus { border: 1px solid #ddd;}@media (min-width: 768px) { .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { border-bottom-color: #fff; }⑥使用nav-tab 和 nav-pills效果如圖1 和圖2 。 ①navbar導航條 就是比nav多了背景條，設置左右的padding和圓角等.navbar-default/inverse 風格設置專用，主要設置顏色及反色。.navbar-brand 作用爲加大字體顯示並控制最大寬度顯示.navbar-form 在.navbar容器內放置form元素（navbar-left/navbar-right）.navbar-nav/ btn/link/text 功能鍵定義.navbar-header 一般在頭部div中添加文字⑧.nav-fixed-top/bottom 利用position爲fixed，絕對定位的特性。⑨.nav-toggle 用於toggle收縮的內容，對應.nav-collapse collapse <nav class="navbar navbar-default"> <div class="navbar-header"><a href="" class="navbar-brand">Brand</a></div> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="search"/> <button type="submit" class="btn btn-default">按鈕左</button> </div> </form> </nav>⑧.navbar-fixed-bottom固定在最底部顯示，.navbar-fixed-top固定在最頭部顯示.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { margin-bottom: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }如果運行後，頂部固定時其他內容被遮住了，因爲navbar高度爲設置爲50px，所以需要設置body的padding。如下：body{padding-top:70px} 頂部固定情況下；body{padding-bottom:70px} 底部固定情況下。⑨nav-toggle在瀏覽器大於768像素時不顯示，在小於768px時顯示.navbar-toggle { position: relative; //相對定位 float: right; //右浮動 padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px;}.navbar-toggle:focus { outline: 0; //焦點狀態輪廓取消} .navbar-toggle .icon-bar {//響應式中icon設置 display: block; //塊級顯示 width: 22px; height: 2px; //限制高度，一般都是3個 border-radius: 1px;}.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px;//多個icon之間垂直間隔}@media (min-width: 768px) { .navbar-toggle { display: none; //寬屏下自動消失 }} <div class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Brand</a> </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">子菜單1</a></li> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單1</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">子菜單4<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">二級菜單1</a></li> <li><a href="#">二級菜單2</a></li> </ul></li> </ul></div></div>breadcrumbs麪包屑導航條 源碼 display：incline-block content: "/\00a0";pagination分頁導航 源碼：incline-block incline 狀態和邊框處理pager翻頁顯示 整體居中，li元素有圓角，左右浮動label標籤 label-default/primary/success… display：incline，label字體大小相對於h1..改變badge徽章 display：incline，背景色，超大圓角，相對定位jumbotron大屏幕展播 加大外邊距，內邊距，寬窄屏下不同字體顯示⑦thumbnails 縮略圖 結合12柵格，display:block,圖片外4px像素⑧alert警告框 設置button的data-dismiss =”alert”⑨alert-dismissable 同⑧ 增加了右外邊距，放置關閉符號⑩alert-link 加深顏色 在相應alert風格下（warning/success/info/danger）加深well窪地 和大屏幕展播Jumbotron類似，多了邊框，自適應文本 ⑦柵格系統佈局實例⑧可以關閉的警告框<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button></div>process 設置進度條的容器樣式process-bar 限制進度條的進度（顏色進度）progress-striped 條紋樣式background-image: linear-gradientmedia 媒體對象是一個抽象樣式，用於構成不同組件list-group/list-group-item 列表組（相對佈局、塊狀顯示）list-group-item-heading/text 設置heading和text元素的文本元素panel/panel-default 面板的樣式和顏色panel-heading/footer 頭部和尾部的面板效果 <div class="panel panel-default"> <div class="panel-heading">我的圖書</div> <div class="panel-body"> <p>Some default panel content here</p> <table class="table table-bordered"> <thead> <tr> <td>#</td> <td>圖書名稱</td> <td>出版社</td> <td>座椅者</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>Javascript 編程精析</td> <td>機械出版社</td> <td>湯姆大叔</td> </tr> </tbody> </table> </div> </div>面板和列表組合嵌套的效果如上Boostrape增加一個boostrap-theme.css文件，該文件針對一些常用css組件進行增強。針對9個方面的組件進行增強：btn選項、縮略圖、下拉菜單、導航條、警告框、進度條、列表組、面板和well。dropdown 大容器，相對定位dropdown-menu 菜單li上的容器，默認爲隱藏，絕對定位（顯示時加.open）dropdown-header 對顏色、字號和內邊距設置dropdown-submenu 二級菜單設置（pull-right向右；dropup向上彈出）btn-group(-xs/sm/lg) 按鈕分組，相對定位，垂直居中btn-toolbar 按鈕工具欄，多個按鈕組排列一起，使用table風格btn-group 下拉菜單外包裝一個div元素btn-group-vercial 垂直分組，寬度自適應btn-group-justified 在btn-group基礎上使用所有按鈕充滿容器btn-group .dropup 上彈菜單 <div class="btn-group"> <a href="#" class="btn btn-default">User<span class="glyphicon glyphicon-user"></span></a> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Edit <span class="glyphicon glyphicon-edit"></span></a></li> <li><a href="">Delete <span class="glyphicon glyphicon-trash"></span></a></li> <li><a href="">Ban <span class="glyphicon glyphicon-ban-circle"></span></a></li> <li class="divider"></li> <li><a href="#">Make admin</a></li> </ul> </div> ①input-group(-lg/sm) 輸入框組②input-group-addon 輸入框組下的小圖標,放置label，icon，checkbox，radio③Input-group-btn 在②基礎上加入內外邊界 ① input-group主要實現以下功能：將各個元素無縫拼接在一起，並設置margin爲0；將各個元素設置爲等高，即display：table-cell；設置addon元素的顯示方式；<div class="row"> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control"/> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">what</a></li> <li><a href="">is that</a></li> </ul> </div> </div> </div> </div不管前後addon有幾個，進行圓角處理。