Web-第五天 BootStrap学习
今日内容介绍
今日内容学习目标
将使用Bootstrap重写首页,整个案例中将使用到Bootstrap各种模块,为了方便编程,将采用拆分的原则,各个模块单独编写,最后组合。
作者:[美] 肯尼斯?巴里西(Kenneth Barish, Ph.D.)
当当 广告
购买
<!DOCTYPE html> <!-- HTML5 约束(固定值)-->
<html> <!-- 声明语言,建议编辑-->
<head>
<!-- 响应式开发必须使用,且必须在<head>前三行 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Bootstrap 模板</title>
<!-- Bootstrap预定义的CSS样式、jQuery核心类库、Bootstrap类库-->
<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../lib/jquery/jquery-1.11.0.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--此属性为文档兼容(compatible)模式声明,表示使用IE浏览器的最新渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
视口:用于设置移动浏览器显示效果。
视口的作用:在移动浏览器中,当页面宽度超出设备(device),浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示
取值:
width=device-width, 视口的宽度,大多手机浏览器视口的宽度是980
device-width 表示采用设备的宽度
initial-scale=1 初始化缩放级别,取值:1-5
minimum-scale=1 最小缩放级别
maximum-scale=1 最大缩放级别
user-scalable=no 禁用缩放
如果设置“user-scalable=no”,则“minimum-scale”和“maximum-scale”无效
下面实例表示的意思:
根据设置确定视口宽度,初始化的缩放比例是2.5,最小缩放比例1.5,最大缩放比例为3,允许在移动设置缩放
常用值:
<meta name="viewport" content="width=device-width, initial-scale=1">
-->
<meta name="viewport" content="width=device-width,initial-scale=2.5,minimum-scale=1.5,maximum-scale=3,user-scalable=yes" />
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 模板</title>
<!-- Bootstrap -->
<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 使IE8支持HTML5元素特性和CSS3媒体查询
注意:respond.js 不能本地运行(file://),必须放置在web服务器(http:// ,暂时不用掌握)
-->
<!--[if lt IE 9]>
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--正文从此处开始-->
<h1>你好,世界!</h1>
<!--前端开发中建议:网站优化时,除了立即需要工作的js存放在header外,将大部分js文件放置在页面的末尾-->
<!-- Bootstrap必须在jQuery的基础上工作-->
<script src="../lib/jquery/jquery-1.11.0.js"></script>
<!-- Bootstrap核心包 -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
<div>
...
</div>
<div>
...
</div>
<!--居中显示,两边有留白-->
<div style="border:1px solid #f00; height:100px;"></div>
<!--整个宽度-->
<div style="border:1px solid #f00; height:100px;"></div>
large : lg
medium : md
small: sm : sm
x small : xs
<div>
<div>
<div class="col-md-3 col-xs-6">11</div>
<div class="col-md-3 col-xs-6">12</div>
<div class="col-md-3 col-xs-6">13</div>
<div class="col-md-3 col-xs-6">14</div>
</div>
<div>
<div class="col-md-3 col-xs-6">21</div>
<div class="col-md-3 col-xs-6">22</div>
<div class="col-md-3 col-xs-6">23</div>
<div class="col-md-3 col-xs-6">24</div>
</div>
</div>
<button type="button" class="btn btn-default">(默认样式)Default</button>
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<button type="button" class="btn btn-success">(成功)Success</button>
<button type="button" class="btn btn-info">(一般信息)Info</button>
<button type="button" class="btn btn-warning">(警告)Warning</button>
<button type="button" class="btn btn-danger">(危险)Danger</button>
<button type="button" class="btn btn-link">(链接)Link</button>
<!--
设置one div,中等屏幕和超小屏幕显示
设置two div,小屏幕和超大屏幕隐藏
-->
<div class="visible-md visible-xs">one</div>
<div class="hidden-sm hidden-lg">two</div>
<!--
1.整个topbar划分比例:1:2:1
2.中间区域只在“大屏幕”和“中等屏幕”显示
3.整个区域在“超小屏幕”英寸
-->
<div class="container topbar hidden-xs">
<div>
<div class="col-md-3 col-sm-6">
<img src="../img/logo2.png"/>
</div>
<div class="col-md-6 visible-lg visible-md">
<img src="../img/header.jpg"/>
</div>
<div class="col-md-3 col-sm-6">
<a href="" class="btn btn-danger btn-sm">免费注册</a>
<a href="" class="btn btn-link btn-sm">登录</a>
<a href="" class="btn btn-link btn-sm">购物车</a>
</div>
</div>
</div>
<!--
1.大屏幕显示所有分类
2.中等屏幕隐藏部分分类,提供“更多”
3.超小屏幕隐藏所有分类,以“汉堡按钮”显示
-->
<div>
<nav class="navbar navbar-default navbar-inverse">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span>汉堡按钮</span>
<span></span>
<span></span>
<span></span>
</button>
<a 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><a href="#">电脑办公 <span>(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li class="dropdown visible-sm">
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span></span></a>
<ul>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li role="separator"></li>
<li><a href="#">电脑办公</a></li>
<li role="separator"></li>
<li><a href="#">电脑办公</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left navbar-right" role="search">
<div>
<input type="text" placeholder="Search">
</div>
<button type="submit" class="btn btn-default hidden-xs">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div>
<div id="index_carousel" class="carousel slide" data-ride="carousel">
<!-- 指示器 Indicators -->
<ol>
<li data-target="#index_carousel" data-slide-to="0"></li>
<li data-target="#index_carousel" data-slide-to="1"></li>
<li data-target="#index_carousel" data-slide-to="2"></li>
</ol>
<!-- 轮播展示
* item 表示一个图片,与“指示器”li的个数保持一致
-->
<div role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="第一张图">
</div>
<div>
<img src="../img/2.jpg" alt="第2张图">
</div>
<div>
<img src="../img/3.jpg" alt="第3张图">
</div>
</div>
<!-- 左右控制区 Controls
* href 用于确定点击触发的那个轮播图
-->
<a class="left carousel-control" href="#index_carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span>前一张</span>
</a>
<a class="right carousel-control" href="#index_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span>下一张</span>
</a>
</div>
</div>
“热卖商品”模块是对栅格系统的再应用。我们将用已有的知识编写出响应式页面。
<div>
<div>
<div>
<h2>热卖商品 <img src="../img/title2.jpg"/></h2>
</div>
</div>
<div>
<div class="col-md-2 col-sm-4 hidden-xs">
<img src="../img/products/big01.jpg" style="width: 100%;"/>
</div>
<div class="col-md-10 col-sm-8">
<div class="col-md-6 col-sm-12" style="height:200px;">
<img src="../img/products/middle01.jpg" style="height: 100%;width:100%;"/>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small01.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small02.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small03.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small04.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small05.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small06.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small07.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small08.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
<div class="col-md-2 product col-sm-4 col-xs-6">
<img src="../img/products/small09.jpg"/>
<p>电器</p>
<p style="font-size: #f00;">¥998</p>
</div>
</div>
</div>
</div>
通过分析,该模块需要使用栅格划分上下两行,第二行的文字信息准备使用“列表”,内容的居中将提供两种方案:文字居中,栅格列偏移
参考文档-文本对齐:全局CSS样式/排版/对齐,http://v3.bootcss.com/css/#type-alignment
参考文档-列表:全局CSS样式/排版/列表,http://v3.bootcss.com/css/#type-lists
参考文档-栅格列偏移:全局CSS样式/栅格系统/列偏移,http://v3.bootcss.com/css/#grid-offsetting
<div>
<div>
<img src="../img/footer.jpg" style="width:100%;"/>
</div>
<div>
<!--可以使用 text-center 文本居中-->
<div class="col-md-8 col-md-offset-3">
<ul>
<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>
<li><a href="#">务声明服</a></li>
<li><a href="#">广告声明</a></li>
</ul>
</div>
</div>
</div>
今日内容介绍
今日内容学习目标
把bootstrap的标签复习一下等着案例练习
现在的网页开发中,经常看到将所有信息编写在一个页面上,然后通过上下滚动翻页进行具体信息查询,且存在一个提示信息,通知用户当前查看的位置。bootstrap提供相应功能,称为“滚动监听”。
帮助文档--胶囊式标签页:组件/导航/胶囊式标签页, http://v3.bootcss.com/components/#nav-pills
帮助文档-滚动监听:JavaScript插件/动态监听,http://v3.bootcss.com/javascript/#scrollspy
<style type="text/css">
.elevator{
width: 70px;
position: fixed;
top: 100px;
left: 5%;
}
.elevator > ul > li > a{
padding: 5px;
}
.elevator .one{
display: none;
}
.elevator .two{
display: block;
}
.elevator .active .one{
display: block;
}
.elevator .active .two{
display: none;
}
</style>
<body data-spy="scroll" data-target=".elevator">
<div id="f1" style="height: 400px;border:1px solid #f00;">1111</div>
<div id="f2" style="height: 400px;border:1px solid #f00;">222</div>
<div id="f3" style="height: 400px;border:1px solid #f00;">333</div>
<div id="f4" style="height: 400px;border:1px solid #f00;">4444</div>
<div class="container elevator">
<ul class="nav nav-pills nav-stacked">
<li role="presentation">
<a href="#f1"><p>导航</p><p>F1</p></a>
</li>
<li role="presentation"><a href="#f2"><p>轮播</p><p>F2</p></a></li>
<li role="presentation"><a href="#f3"><p>新品</p><p>F3</p></a></li>
<li role="presentation"><a href="#f4"><p>特色</p><p>F4</p></a></li>
</ul>
</div>
</body>
当浏览器向下滚动到指定位置时,导航条悬浮在指定页面最顶端,保证整个浏览过程,都可以看到导航条。Bootstrap提供实现功能是“affix 粘贴”
参考文档:JavaScript插件/affix/用法,http://v3.bootcss.com/javascript/#via-data-attributes-3
<div class="container " data-spy="affix" data-offset-top="60">
.header_fixed{
z-index: 1;
top: 0;
left: 0;
right: 0;
}
<div class="container header_fixed" data-spy="affix" data-offset-top="60">