响应式框架Bootstrap栅格系统
生活随笔
收集整理的這篇文章主要介紹了
响应式框架Bootstrap栅格系统
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Bootstrap 是一個用于快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap 提供了一些輔助類，以便更快地實現對移動設備友好的開發。這些可以通過媒體查詢結合大型、小型和中型設備，實現內容對設備的顯示和隱藏。
row 行，
-md 桌面顯示器
-ms 平板顯示器
-xs 手機顯示器
1行有12列
<div class= "row">
<div class = "col-md-12"></div>
<div class = "col-ms-12"></div>
<div class = "col-xs-12"></div> //表示一行中有12列
</div>
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/bootstrap.min.css"/><script language="JavaScript" src="js/jquery-3.js"></script><style type="text/css">*{top: 0px;padding: 0px;text-decoration: none;list-style-type: none;}.top-styl{height: 50px;border: 1px solid red;background-color: #000000;}.img-styl{width: 174px;height: 50px;background: url("imges/logo.png")no-repeat 0px 3px;background-size: contain;float: left;}.sousuo-styl{width: 187px;float: left;}.top-search-input{width: 150px;padding: 0 5px;height: 30px;border: 0;background: #363636;float: left;color: #ccc;}.top-search-submit{width: 30px;height: 30px;border: 0;background:? green url("imges/zoom.gif")center center no-repeat;float: left;cursor: pointer; //光標指針}.dao-styll{float: left;font-size: 16px;width: 329px;margin-left: 33px;margin-top: 11px;}.dao-styll li{float: left;position: relative; //相對定位text-align: center; //居中padding: 0 7px;}.dao-styll >li:hover{background-color: #999;}.dao-styll >li >a{color: #FFF;width: 100%;height: 34px;text-decoration: none; //取消下劃線}.dz-styl{float: right;margin: -19px -9px 6px 21px;}.imgs-styl{padding: 11px 0px 0px 114px;float: right;margin: 0px -98px -3px 8px;}.green-styl{color: green;}.zc-styl{color: white;}a{text-decoration: none;}</style> </head> <body><div class="container-fluid">?? //fluid表示用 百分比<div class="row"> //row? 行<div class="top-styl col-md-12"> //col-md-12?每行桌面占12列<div class="row"><div class=" col-md-offset-1 col-md-9"> //col-md-offset-1 列偏移1列<div class="row"><div class="col-md-3 col-xs-4"><div class="img-styl"></div></div><div class="col-md-3 "><div class="sousuo-styl" style="padding-left: 7px; margin: 8px auto;"><input class="top-search-input" value="" type="text"><inputclass="top-search-submit" type="submit" value="" /></div></div><div class="col-md-4 hidden-xs" style="padding: 0px"><ul class="dao-styll"><li class=""><a href="#">風格</a></li><li class=""><a href="#">造型師</a></li><li class=""><a href="#">眾分享</a></li><li class=""><a href="#">我的美麗衣櫥</a></li></ul></div><div class="col-md-2"><div class="imgs-styl"><img src="imges/sina.gif"></div><div class="dz-styl"><span><a href="#" class="green-styl">登錄</a> | </span><span><a href="#" class="zc-styl">注冊</a></span></div></div></div></div></div></div></div><div class="row"><div class="visible-md"><h1>當前為桌面顯示</h1></div> //visible默認占滿整行 <div class="visible-sm"><h1>當前為平面顯示</h1></div><div class="visible-xs"><h1>當前為手機顯示</h1></div></div></div> </body> </html
Bootstrap 提供了一些輔助類，以便更快地實現對移動設備友好的開發。這些可以通過媒體查詢結合大型、小型和中型設備，實現內容對設備的顯示和隱藏。
row 行，
-md 桌面顯示器
-ms 平板顯示器
-xs 手機顯示器
1行有12列
<div class= "row">
<div class = "col-md-12"></div>
<div class = "col-ms-12"></div>
<div class = "col-xs-12"></div> //表示一行中有12列
</div>
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/bootstrap.min.css"/><script language="JavaScript" src="js/jquery-3.js"></script><style type="text/css">*{top: 0px;padding: 0px;text-decoration: none;list-style-type: none;}.top-styl{height: 50px;border: 1px solid red;background-color: #000000;}.img-styl{width: 174px;height: 50px;background: url("imges/logo.png")no-repeat 0px 3px;background-size: contain;float: left;}.sousuo-styl{width: 187px;float: left;}.top-search-input{width: 150px;padding: 0 5px;height: 30px;border: 0;background: #363636;float: left;color: #ccc;}.top-search-submit{width: 30px;height: 30px;border: 0;background:? green url("imges/zoom.gif")center center no-repeat;float: left;cursor: pointer; //光標指針}.dao-styll{float: left;font-size: 16px;width: 329px;margin-left: 33px;margin-top: 11px;}.dao-styll li{float: left;position: relative; //相對定位text-align: center; //居中padding: 0 7px;}.dao-styll >li:hover{background-color: #999;}.dao-styll >li >a{color: #FFF;width: 100%;height: 34px;text-decoration: none; //取消下劃線}.dz-styl{float: right;margin: -19px -9px 6px 21px;}.imgs-styl{padding: 11px 0px 0px 114px;float: right;margin: 0px -98px -3px 8px;}.green-styl{color: green;}.zc-styl{color: white;}a{text-decoration: none;}</style> </head> <body><div class="container-fluid">?? //fluid表示用 百分比<div class="row"> //row? 行<div class="top-styl col-md-12"> //col-md-12?每行桌面占12列<div class="row"><div class=" col-md-offset-1 col-md-9"> //col-md-offset-1 列偏移1列<div class="row"><div class="col-md-3 col-xs-4"><div class="img-styl"></div></div><div class="col-md-3 "><div class="sousuo-styl" style="padding-left: 7px; margin: 8px auto;"><input class="top-search-input" value="" type="text"><inputclass="top-search-submit" type="submit" value="" /></div></div><div class="col-md-4 hidden-xs" style="padding: 0px"><ul class="dao-styll"><li class=""><a href="#">風格</a></li><li class=""><a href="#">造型師</a></li><li class=""><a href="#">眾分享</a></li><li class=""><a href="#">我的美麗衣櫥</a></li></ul></div><div class="col-md-2"><div class="imgs-styl"><img src="imges/sina.gif"></div><div class="dz-styl"><span><a href="#" class="green-styl">登錄</a> | </span><span><a href="#" class="zc-styl">注冊</a></span></div></div></div></div></div></div></div><div class="row"><div class="visible-md"><h1>當前為桌面顯示</h1></div> //visible默認占滿整行 <div class="visible-sm"><h1>當前為平面顯示</h1></div><div class="visible-xs"><h1>當前為手機顯示</h1></div></div></div> </body> </html
?
?
效果顯示圖：
?
?
?
?
總結
以上是生活随笔為你收集整理的响应式框架Bootstrap栅格系统的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 显式转换与隐式转换
- 下一篇： DOM BOM document win