文章目錄
- 前言
- bootstrap使用步驟
- 媒體查詢
- 栅格系統
- 組成部分
- 黑馬商城案例
前言
開發一套頁面，适配不同分辨率的上網裝置
下載下傳及文檔資料請檢視：bootstrap中文網
bootstrap使用步驟
- 導入jquery-1.11.0.min.js檔案
- 導入bootstrap.css檔案
- 導入bootstrap.js檔案
- 建立視口
- 建立布局容器
<div class="container">
...
</div>
<div class="container-fluid">
...
</div>
媒體查詢
分辨率>1200px 大螢幕
1200px>分辨率>992px 中等螢幕
992px>分辨率>768px 小螢幕
768px>分辨率 超小螢幕
栅格系統
把每一行分為十二份 超過十二份自動換行
大螢幕 col-lg-n
中等螢幕 col-md-n
小螢幕 col-sm-6
超小螢幕 col-xs-12
組成部分
- 全局css，設定全局 CSS 樣式；基本的 HTML 元素均可以通過 class 設定樣式并得到增強效果；還有先進的栅格系統。
- 元件， 無數可複用的元件，包括字型圖示、下拉菜單、導航、警告框、彈出框等更多功能。
- js插件， jQuery 插件為 Bootstrap 的元件賦予了“生命”。可以簡單地一次性引入所有插件，或者逐個引入到你的頁面中。
黑馬商城案例
1.完成bootstrap的初始化工作
2.建立9個div
第一個div：存放logo資訊 在中等螢幕每個占4份 在小螢幕和超小螢幕占12份
第二個div：存放導覽列 不用控制響應式
第三個div：存放輪播圖 不用控制響應式
第四個div：存放熱門商品
上下切分為兩個div
上面的div
存放熱門商品文字資訊
下面的div
存放商品圖檔資訊
切分左右兩個div
左邊的div
豎着的大圖 在中等螢幕的時候 占2份 在小螢幕的時候占12份 在超小螢幕的時候隐藏
右邊的div
存放具體的小商品 在中等螢幕的時候占10份 在小螢幕的時候占12份 在超小螢幕的時候占12份
大圖：
在中等螢幕的時候占6份 在小螢幕的時候隐藏 在超小螢幕的時候隐藏
小圖：
在中等螢幕的時候占2份 在小螢幕的時候占3份 在超小螢幕的時候占6份
第五個div：存放圖檔
第六個div：存放熱門商品
上下切分為兩個div
上面的div
存放熱門商品文字資訊
下面的div
存放商品圖檔資訊
切分左右兩個div
左邊的div
豎着的大圖 在中等螢幕的時候 占2份 在小螢幕的時候占12份 在超小螢幕的時候隐藏
右邊的div
存放具體的小商品 在中等螢幕的時候占10份 在小螢幕的時候占12份 在超小螢幕的時候占12份
大圖：
在中等螢幕的時候占6份 在小螢幕的時候隐藏 在超小螢幕的時候隐藏
小圖：
在中等螢幕的時候占2份 在小螢幕的時候占3份 在超小螢幕的時候占6份
第七個div：存放圖檔
第八個div：存放友情連結
第九個div：存放版權資訊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--建立視口-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!--導入jquery檔案-->
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<!--導入bootstrap.css檔案-->
<link rel="stylesheet" href="../css/bootstrap.css" />
<!--導入bootstrap.js-->
<script type="text/javascript" src="../js/bootstrap.js" ></script>
</head>
<body>
<!--建立布局容器-->
<div class="container-fluid">
<!--第一個div：存放logo資訊 在中等螢幕每個占4份 在小螢幕和超小螢幕占12份-->
<div>
<!--嵌套三個div-->
<div class="col-md-4 col-sm-12 col-xs-12">
<img src="../img/logo2.png"/>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<img src="../img/header.jpg"/>
</div>
<div class="col-md-4 col-sm-12 col-xs-12 text-center" style="padding-top: 20px;">
<a href="#">登入</a>
<a href="#">注冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動-->
<div class="clearfix"></div>
<!--第二個div：存放導覽列 不用控制響應式-->
<div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首頁</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手機數位 <span class="sr-only">(current)</span></a></li>
<li><a href="#">電子裝置</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">水果 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">蘋果</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">大鴨梨</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">榴蓮</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">芒果</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left pull-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--第三個div：存放輪播圖 不用控制響應式-->
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 控制圓點 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 控制圖檔 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item ">
<img src="../img/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- 控制左右箭頭 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--第四個div：存放熱門商品-->
<div>
<!--上面的div-->
<div>
<span class="h2">熱門商品</span>
<img src="../img/title2.jpg"/>
</div>
<!--下面的div-->
<div>
<!--左邊的div-->
<div class="col-md-2 col-sm-12 hidden-xs">
<img src="../img/big01.jpg" width="190px" height="390px"/>
</div>
<!--右邊的div-->
<div class="col-md-10 col-sm-12 col-xs-12">
<!--商品中的大圖-->
<div class="col-md-6 hidden-sm hidden-xs">
<img src="../img/middle01.jpg" width="500px" height="190px"/>
</div>
<!--商品中的小圖-->
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg" />
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
</div>
</div>
</div>
<!--第五個div：存放圖檔 -->
<div>
<img src="../img/ad.jpg" width="100%"/>
</div>
<!--第六個div：存放熱門商品-->
<div>
<!--上面的div-->
<div>
<span class="h2">熱門商品</span>
<img src="../img/title2.jpg"/>
</div>
<!--下面的div-->
<div>
<!--左邊的div-->
<div class="col-md-2 col-sm-12 hidden-xs">
<img src="../img/big01.jpg" width="190px" height="390px"/>
</div>
<!--右邊的div-->
<div class="col-md-10 col-sm-12 col-xs-12">
<!--商品中的大圖-->
<div class="col-md-6 hidden-sm hidden-xs">
<img src="../img/middle01.jpg" width="500px" height="190px"/>
</div>
<!--商品中的小圖-->
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg" />
<p>
<a href="">電鍋</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
</div>
</div>
</div>
<!--第七個div：存放圖檔-->
<div style="margin-top: 40px;">
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--第八個div：存放友情連結-->
<div class="text-center">
<ul class="list-inline">
<li><a href="">傳智播客</a></li>
<li><a href="">傳智播客</a></li>
<li><a href="">傳智播客</a></li>
<li><a href="">傳智播客</a></li>
<li><a href="">傳智播客</a></li>
<li><a href="">傳智播客</a></li>
<li><a href="">傳智播客</a></li>
</ul>
</div>
<!--第九個div：存放版權資訊-->
<div>
<p align="center">
Copyright © 2005-2016 傳智商城 版權所有
</p>
</div>
</div>
</body>
</html>
![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)