可見框架-像素選擇 -block-inline :塊內聯元素
-inline-block將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格 可以設置寬度和高度地塊元素的屬性
visible-md sd sx - block-inline ; inline-block;
hidden：隱藏用法=visible；
class='pull left' 左浮動 class='pull right' 右浮動
affix:絕對定位！ margin:0; left:0;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <style> div[class*='col-']{ background:#666; border:1px solid #039; min-height:50px; color:#FFF;} </style> <body> <div class="container"> <div class="row"> <div class="col-lg-4 visible-sm-block visible-md-block visible-xs-block">col-lg-4 visible-sm-block visible-md-block visible-xs-block 小於960像素出現</div> <div class="col-sm-12 hidden-sm hidden-xs">col-sm-12 hidden-sm hidden-xs小於960像素隱藏</div> </div> </div> </body> <script src="js/bootstrap.js"></script> <script src="js/jquery-1.11.1.js"></script> </html>
利用浮動做側邊框 pull-right; pull-left
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <style> .dip1{ width:35px; height:300px; background:#03C; color:#CCC;} .dip2{ width:60px; height:500px; background:#13C; color:#CCC;} </style> <body> <!--<div class="container"> <div class="row"> <div class="col-lg-4 visible-sm-block visible-md-block visible-xs-block">col-lg-4 visible-sm-block visible-md-block visible-xs-block 小於960像素出現</div> <div class="col-sm-12 hidden-sm hidden-xs">col-sm-12 hidden-sm hidden-xs小於960像素隱藏</div> </div> </div>--> <div class='container-fluid pull-right'> <div class="row"><!--解決邊界--> <div class="hidden-lg dip1 pull-right">小於960顯示 </div> <div class="visible-lg-block dip2">大於960時顯示 </div> </div> </div> </body> <script src="js/bootstrap.js"></script> <script src="js/jquery-1.11.1.js"></script> </html>
利用絕對定位affix margin:0; left:0;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <style> .dip1{ width:35px; height:300px; background:#03C; color:#CCC; right:0;} .dip2{ width:60px; height:500px; background:#13C; color:#CCC; right:0;} </style> <body> <!--<div class="container"> <div class="row"> <div class="col-lg-4 visible-sm-block visible-md-block visible-xs-block">col-lg-4 visible-sm-block visible-md-block visible-xs-block 小於960像素出現</div> <div class="col-sm-12 hidden-sm hidden-xs">col-sm-12 hidden-sm hidden-xs小於960像素隱藏</div> </div> </div>--> <div class='container-fluid affix'> <div class="row"><!--解決邊界--> <div class="hidden-lg dip1 affix">小於960顯示 </div> <div class="visible-lg-block dip2 affix">大於960時顯示 </div> <div>Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。目前,Bootstrap最新版本為3.0 </div> </div> </div> </body> <script src="js/bootstrap.js"></script> <script src="js/jquery-1.11.1.js"></script> </html>