實例講解響應式框架Bootstrap柵格系統

來源：懂視網責編：小OO 時間：2020-11-27 20:10:04

實例講解響應式框架Bootstrap柵格系統

【相關視頻推薦：Bootstrap教程】。實例如下：<；<。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"；rel="；/>。

推薦度：

點擊下載本文 文檔為doc格式

導讀【相關視頻推薦：Bootstrap教程】。實例如下：<；<。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"；rel="；/>。

柵格系統柵格系統英文為"grid systems"，也有人翻譯為"網格系統"，運用固定的格子設計版面布局，其風格工整簡潔，在二戰后大受歡迎，已成為今日出版物設計的主流風格之一。本文主要為大家分享一篇響應式框架Bootstrap柵格系統的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧，希望能幫助到大家。

【相關視頻推薦：Bootstrap教程】

實例如下：

<!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" rel="external nofollow" />
 <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>
 <p class="container-fluid"> 　　　　　　　　　　//fluid表示用 百分比
 <p class="row">　　　　　　　　　　　　　　　//row 行
 <p class="top-styl col-md-12">　　　　　　　　//col-md-12 每行桌面占12列
 <p class="row">
 <p class=" col-md-offset-1 col-md-9">　　　//col-md-offset-1 列偏移1列
 <p class="row">
 <p class="col-md-3 col-xs-4">
 <p class="img-styl"></p>
 </p>
 <p class="col-md-3 ">
 <p class="sousuo-styl" style="padding-left: 7px; margin: 8px auto;">
 <input class="top-search-input" value="" type="text"><input
 class="top-search-submit" type="submit" value="" />
 </p>
 </p>
 <p class="col-md-4 hidden-xs" style="padding: 0px">
 <ul class="dao-styll">
 <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >風格</a>
 </li>
 <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >造型師</a></li>
 <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >眾分享</a>
 </li>
 <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我的美麗衣櫥</a></li>
 </ul>
 </p>
 <p class="col-md-2">
 <p class="imgs-styl">
 <img src="imges/sina.gif">
 </p>
 <p class="dz-styl">
 <span><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="green-styl">登錄</a> | </span><span>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="zc-styl">注冊</a></span>
 </p>
 </p>


 </p>
 </p>
 </p>
 </p>
 </p>

 <p class="row">
 <p class="visible-md"><h1>當前為桌面顯示</h1></p>　　　//visible默認占滿整行　
 <p class="visible-sm"><h1>當前為平面顯示</h1></p>
 <p class="visible-xs"><h1>當前為手機顯示</h1></p>
 </p>
 </p>
</body>
</html>

效果顯示圖：