代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<nav class="top ">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵,欢迎来天猫</span>
<a href="#nowhere">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="#nowhere">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>0</strong>件</a>
</span>
</nav>
访问出来的效果是
基础概念总结
1、因为bootstrap用到了html5的特性,为了正常使用,需要在最开头加上 <!DOCTYPE html>
2、而如下代码的作用是为了使用Bootstrap的功能,必须要导入,顺序不要搞错了,否则有一些效果会出不来。
首先是JQuery
然后是Bootstrap css
最后是Bootstrap js
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
3、<a href="#nowhere">
是超链接为以后的功能做准备
4、<span class="pull-right"> <span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
是Bootstrap的一些定义可以显示出炫酷的效果。
5、<nav>
元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要的、基本的、重要的放在nav元素里面即可。