Bootstrap 3.0 响应式多终端支持的站点开发 - 动手尝试深入了解

前置要求：

1. 熟悉并会使用HTML
2. 熟悉并会使用CSS
3. 熟悉并会使用Javascript
4. 熟悉一种会制作html的开发工具，新手推荐使用Editplus

课程目标：开发环境有了，那么我们先尝试动手做点有用的，进一步的了解bootstrap

1. 学习如何制作导航栏navbar，导航是最常用的结构，为了能够支持多终端，bootstrap又是如何实现这种特性的
2. 学习如何使用Grid系统，bootstrap里是如何实现内容布局的
3. 举一反三，知道bootstrap的架构理论之后，自我学习更多有关bootstrap的内容

一、如何下手Bootstrap

   首先，一种技术如果是非常庞大的知识体系，那么我们学习它肯定不能没有条理的学，要不然，会迷惘的。当然，bootstrap没那么夸张，不过再小的知识内容也可以细分。好吧，那么bootstrap主要分几块来学呢？

1. 基本结构部分，这部分主要演示bootstrap，它是如何实现和体现html的基本功能，譬如布局，格式书写，表单，表格等等。
2. 组件部分，在这么长时间的web开发过程中，大家都意识到许多东西是比较固定，这些固定的部分，往往经常被重用，bootstrap把这些常用的模块结构加以收集和提炼，做成非常好用的组件。譬如，导航一般网站都会有，我们这里第一个开刀的就是它。
3. js组件部分，同上，这部分也是组件，不过为了增强交互能力和交互效果，加入js的支持。譬如弹出菜单，滚动图片浏览器等等
4. bootstrap兼容性问题以及多终端相关知识，这部分最好在你足够了解bootstrap之后再去思考和总结。

   废话不多说，动手，先尝试，让自己有感觉。

二、网站能少导航么？

  首先，我们来学习如何制作最常用的bootstrap组件，navbar导航栏。我们的代码可以接着之前的代码继续。
  我们采用循序渐进的方式来认识导航的html代码结构。

<ul class="nav">
	<li class="active"><a href="#">首页</a></li>
	<li><a href="#">作品</a></li>
	<li><a href="#">关于我</a></li>
</ul>

   此代码，是让我们构建一个纵向导航菜单。类 active表示当前激活项，disabled可以屏蔽菜单项，自己尝试。如何让它变成横向导航菜单呢？只需要在nav后再追加一个类navbar-nav。虽然可以体现横向菜单效果，不过一般导航是放在导航菜单容器中的，所以代码如下。

<div class="navbar navbar-default">
	<ul class="nav navbar-nav">
		<li class="active"><a href="#">首页</a></li>
		<li><a href="#">作品</a></li>
		<li><a href="#">关于我</a></li>
	</ul>
</div>

   此处navbar表示导航容器，导航容器中可以放许多东西，navbar-default表示导航的一种样式，bootstrap还可以一种反色样式navbar-inverse。自己尝试看效果。接下来，我们要来完成导航适应多种分辨率的自由变化，这里的变化指在浏览器宽度过窄的时候，菜单能自动隐藏。很简单，只需要在nav菜单外面套一个收缩容器。

<div class="navbar navbar-default">
	<div class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#">作品</a></li>
			<li><a href="#">关于我</a></li>
		</ul>
	</div>
</div>

  此处类collapse其实规则是隐藏display:none，那为什么没有隐藏呢，是因为.navbar-collapse.collapse在宽度大于768px的时候是display:block。尝试拉伸浏览器的宽度来看效果。但是菜单隐藏了，怎么用呢？接下来，我们要让菜单可以通过按钮点击弹出。

<div class="navbar navbar-default">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			Toggle
		</button>
		<a class="navbar-brand">Bootstrap</a>
	</div>
	<div class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#">作品</a></li>
			<li><a href="#">关于我</a></li>
		</ul>
	</div>
</div>

  此处类navbar-header是导航头容器，里面除了可以放切换按钮之外，还可以放导航logo，由navbar-brand来定义。data-toggle表示切换收缩状态，data-target里定义一个选择符，表示要切换哪个导航菜单，因为下面定义了这个类，当然你可以用id，组合选择符来定义。自己尝试效果，因为这里有js的支持，所以菜单会有动态的弹出效果。下面我们来看一个更加完整的版本。

<div class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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">Bootstrap</a>
	</div>
	<div class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#">作品</a></li>
			<li><a href="#">关于我</a></li>
		</ul>
	</div>
</div>

  完整版本中，美化了切换按钮。role这个 属性bootstrap是强调要有的，虽然不是必须的，这是为了增加代码结构的可读性和可访问性。类sr-only其实search only，意思为搜索引擎友好化，所以Toggle navigation这字是不显示的。icon-bar定义了标签一种横线图片背景，关于其他的图片，可以去参考文档。到此为止，我们这个简易的具备支持多终端的响应式导航就完成了。

三、页面内容如何组织？Bootstrap Grid系统