写在前面
在该文中，我结合自己做的一个山水网页来聊一下Bootstrap的使用，网页截图如下：
完整网页的效果和代码可以点击这里查看或者到CodePen上查看。网页要达到的主要效果包括以下几点：
1、导航栏的登陆、注册按钮点击后弹出登陆、注册modal框，并且登陆、注册窗口可切换，菜单栏为响应式
2、导航栏中的山水选项可下拉，点击下拉中的九寨沟``丽江``水帘洞会定位到相应的tab
3、幻灯片大屏轮播
4、tab页点击切换
下面我们开始拥Bootstrap入怀。
Bootstrap想必小伙伴们都听说过或使用过，在这个网页中，我用的是cdn Bootstrap v3.3.4，这里可以下载最新版本的Bootstrap v3.3.5或者点击自行到官网上下载，相信总有一款适合你~~~~~~
这篇文章让我们先聊一下导航栏。
导航栏
在使用bs之前首先要引用bs，包括css和js，引用的方式很简单，和引用普通外部文件相同，可以使用cdn链接，也可以放在本地引用。下面给出代码。在该山水网页例子中，我用的是cdn链接。
同时，因为bs的插件是基于jq的，所以jq也得引入。
先给出导航栏完整代码
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索景点..">
<button type="button" class="btn btn-default">Go
<ul class="nav navbar-nav navbar-right">
<li data-toggle="modal" data-target="#signin-signup-tab" id="signin-button">登陆
<li data-toggle="modal" data-target="#signin-signup-tab" id="signup-button">注册