下载Bootstrap的已编译的版本，解压缩ZIP文件，得到下面的文件/目录结构：
新建一文件夹作为网站的根目录，将上面得到的文件存放于该目录，网站的目录结构可参照下图。
2、使用Bootstrap的基本HTML模板
3、制作导航栏
导航栏是Bootstrap网站的一个基础组件，也是导航页的响应式基础组件。它在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。如下所示。
正常显示效果
视口宽度小显示效果
在Bootstrap导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。基本框架如下。
①button标签里包含三个span显示三条横线图标。
②通过data属性：向元素添加data-toggle="collapse"和data-target，自动分配可折叠元素的控制。data-target属性接受一个CSS选择器，并会对其应用折叠效果。请确保向可折叠元素添加class.collapse。
③修改导航栏的样式，加入class样式：navbar-inverse（黑底白字），并把导航栏固定在浏览器顶部，添加class样式:navbar-fixed-top。
4、下拉菜单
使用下拉菜单（Dropdown）插件向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。基本结构如下。
①通过data属性：向链接或按钮添加data-toggle="dropdown"来切换下拉菜单
②利用caret样式实现下拉菜单的小三角效果
③下拉菜单的ul必须使用dropdown-menu样式
④Bootstrap提供divider类样式，具有分隔线的效果
5、制作轮播图
Bootstrap轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式，效果如下图所示。
该插件基本结构如下。
③防止图片大小不一致，宽度拉伸，设置.carousel.img宽度100%
④设置carousel-caption下的p下边距20px，字体大小20px，行高1.8em
⑤设置body的padding-top，使轮播图与导航栏无空隙。
6、栅格（网格）布局
Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
根据上述结构，完成下面的效果。
7、制作标签页
标签页（Tab）插件可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
标签页其实就是一个列表，主要有两部分内容组成：
它的基本结构如下。
通过该结构，在上面的container容器内完成标签页的制作，注意以下几个方面。
①上图中白色线内容比较关键
②由于选项卡面板的每一个tab-pane采用栅格布局，所以内容一定要放在row的div中，且注意row一定要放在container的容器中，前面讲明栅格布局。
③每个tab-pane包括一行两栏。
效果如下图所示。
①在tab-pane的row容器中添加.feature样式，设置padding:30px0
②每栏的标题应用.feature-leading样式，设置：字体大小50px、字体颜色#2a6496、上边距120px
③每栏的副标题应用text-muted样式，设置：字体大小28px、字体颜色#999
8、制作模态框
模态框（Modal）插件是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
本例在单击导航栏中的“关于”时，弹出一个模态框，如下图所示。
模态框的基本结构包括三个部分，具体如下：
①头部——主要包括关闭按钮和模态框标题
②主要内容——主要是一些文本
③底部——主要是一些按钮，如关闭、提交等按钮。
9、页面底部
在container窗口内制作页面底部信息，效果如下图所示。
1*利用HTML5的footer标签完成，并将“回到顶部”段落右浮动，完成页面效果。参考：应用Bootstrap提供的pull-right类样式。
2*完成后可能页面底部内容离底部太近，因此，可以设置body的padding-bottom，这样页面底部相对会美观。