Web前端技术：Bootstrap插件基础---Bootstrap环境安装，使用Bootstrap 的基本HTML 模板，制做导航栏，下拉菜单，制做轮播图，栅格布局，制做标签页，制做模态框，页面底部

一、Bootstrap环境安装

下载 Bootstrap 的已编译的版本，解压缩 ZIP 文件，获得下面的文件/目录结构：

新建一文件夹做为网站的根目录，将上面获得的文件存放于该目录，网站的目录结构可参照下图。

 

二、 使用Bootstrap 的基本HTML 模板

 

三、 制做导航栏

导航栏是 Bootstrap 网站的一个基础组件，也是导航页的响应式基础组件。它在移动设备的视图中是折叠的，随着可用视口宽度的增长，导航栏也会水平展开。以下所示。

                                                                  正常显示效果

 

 

 

                                                                 视口宽度小显示效果

在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。基本框架以下。

①　button标签里包含三个span显示三条横线图标。　

②　经过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。

• data-toggle="collapse" 添加到您想要展开或折叠的组件的连接上。
• href 或 data-target 属性添加到父组件，它的值是子组件的 id。

③　修改导航栏的样式，加入class样式：navbar-inverse（黑底白字），并把导航栏固定在浏览器顶部，添加class样式: navbar-fixed-top。  

 

 四、下拉菜单

 

使用下拉菜单（Dropdown）插件向任何组件（好比导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。基本结构以下。

①　经过 data 属性：向连接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

②　利用caret样式实现下拉菜单的小三角效果

③　下拉菜单的ul必须使用dropdown-menu样式

④　Bootstrap提供divider类样式，具备分隔线的效果

 

五、制做轮播图

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式，效果以下图所示。

该插件基本结构以下。

 

①　设置.carousel样式，包括：滚动广告的高度500、背景颜色#000、margin-bottom: 60px

②　设置.carousel下的 .item样式，包括：滚动广告的高度500、背景颜色#000

③　防止图片大小不一致，宽度拉伸，设置.carousel .img宽度100%

④　设置carousel-caption下的p下边距 20px，字体大小20px，行高1.8em

⑤　设置body的padding-top，使轮播图与导航栏无空隙。

 

六、 栅格（网格）布局

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列。

根据上述结构，完成下面的效果。

 

七、制做标签页

标签页（Tab）插件能够把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

标签页其实就是一个列表，主要有两部份内容组成：

①　选项卡菜单组件，对应的是 Bootstrap的 nav-tabs选项卡。导航连接要设置 data-toggle="tab"，经过 href="对应内容面板的选择符(通常是ID)"，主要做用是用户点击的时候能找到该选择符所对应的面板内容tab-pane。

②　选项卡面板组件，面板内容统一放在 tab-content 容器中，并且每一个内容面板 tab-pane 都须要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配

它的基本结构以下。

经过该结构，在上面的container容器内完成标签页的制做，注意如下几个方面。

①　上图中白色线内容比较关键

②　因为选项卡面板的每个tab-pane采用栅格布局，因此内容必定要放在row的div中，且注意row必定要放在container的容器中，前面讲明栅格布局。

③　每一个tab-pane包括一行两栏。

效果以下图所示。

①　在tab-pane的row容器中添加.feature样式，设置padding:30px 0

②　每栏的标题应用.feature-leading样式，设置：字体大小50px、字体颜色#2a6496、上边距120px

③　每栏的副标题应用text-muted样式，设置：字体大小28px、字体颜色#999

八、制做模态框

模态框（Modal）插件是覆盖在父窗体上的子窗体。一般，目的是显示来自一个单独的源的内容，能够在不离开父窗体的状况下有一些互动。子窗体可提供信息、交互等。

本例在单击导航栏中的“关于”时，弹出一个模态框，以下图所示。

模态框的基本结构包括三个部分，具体以下：

①　头部——主要包括关闭按钮和模态框标题

②　主要内容——主要是一些文本

③　底部——主要是一些按钮，如关闭、提交等按钮。

使用模态窗口，常使用按钮或连接来触发。设置触发的方法：在控制器元素（好比按钮或者连接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）

 

九、页面底部

在container窗口内制做页面底部信息，效果以下图所示。

1*利用HTML5的footer标签完成，并将“回到顶部”段落右浮动，完成页面效果。参考：应用Bootstrap提供的pull-right类样式。

2*完成后可能页面底部内容离底部太近，所以，能够设置body的padding-bottom，这样页面底部相对会美观。