久闻Bootstrap的大名，也没有亲手实践过，真是让人手痒的。这也难怪，后端的逻辑往往忙活的令人不可开交，平时几乎没有机会来做前端的东西。前两天在动弹里看到有人吐槽，话说什么一个java程序员什么都要做，HTML、js、数据库等，我想说的是，php程序员才是这样的呢，前端程序员不一定要懂后端的技术，但是后端的程序员是一定要懂前端的技术。就用这几天的空余时间，对Bootstrap做一个初步的了解吧。
Bootstrap是移动设备优先的，它针对移动设备的样式融合进了框架的每个角落，使得只需要通过简单的编码，便可以实现漂亮的响应式布局。
今天的就先了解一下导航条和下拉菜单的制作，手写了一个小案例，把笔记写在了注释之中，这样看起来比较清晰明了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>学PHP的小蚂蚁的博客</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
body{
padding-top: 70px;
}
</style>
</head>
<body>
<!--
navbar 定义了这是一个导航条，它会应用导航条的样式。
navbar-default表明引用的是一个默认导航条样式。
navbar-fixed-top将导航条固定在页面的顶部，不会随着滚动条上移
navbar-inverse将现在默认样式的灰色，改为黑色，根据个人审美自定义哈
role='navigation' 指明这就是一个导航
-->
<nav class='navbar navbar-default navbar-fixed-top navbar-inverse' role="navigation">
<!--
这里的类，可以使用.container和.container-fluid两种写法，那么这两种写法有什么区别呢?
container代表导航条自适应浏览器大小布局，container-fluid代表固定宽度布局。
-->
<div>
<!--
navbar-header 导航条的头部，就是最右侧的小方块按钮啦
-->
<div>
<!--
小方块按钮
navbar-toggle collapsed可以切换折叠
-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span>Toggle navigation</span>
<!--
小方块中间的小横线，添加三个比较美观，自定义也行
-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--
.navbar-brand 导航条的品牌？？
其实可以理解为本网页或者网站的名称了，当然这个导航的名称也是可以的，对，就是个名称！
-->
<a href="http://my.oschina.net/woshixiaomayi/blog">学PHP的小蚂蚁博客</a>
</div>
<!--
这里就是导航的列表栏目了
-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--
导航列表，包含了所有应该出现的栏目。
这里和上面的那个button按钮是对应的，当浏览器小于一定比例，这里就会消失，button就会出现，
从而实现了响应式布局
-->
<ul class="nav navbar-nav">
<!--
.dropdown 栏目的下拉菜单
-->
<li>
<!--
.dropdown-toggle 下拉菜单的切换
.caret 一个向下的小图片
-->
<a href="#" data-toggle="dropdown">PHP<span></span></a>
<!--
.dropdown-menu 这里是一个下拉菜单
-->
<ul role='menu'>
<li><a href="#">cURL</a></li>
<li><a href="#">正则</a></li>
<li><a href="#">性能优化</a></li>
</ul>
</li>
<li><a href="#">Mysql</a></li>
<li><a href="#">Linux</a></li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html> 讲一下总体感受，感觉起来就是一些框架规定好的类元素，自己把它们放置到应该放置的地方即可，很简单，不过框架的好处大概也是这个吧，东西都是现成的，按照框架要求的格式写，就可以很好的实现。
学PHP的小蚂蚁 原创博客 http://my.oschina.net/woshixiaomayi/blog
来源：oschina
链接：https://my.oschina.net/u/1423209/blog/527451