BootStrap

案例:使用Bootstrap搭建网站首页

0.1 案例介绍

本案例使用Bootstrap搭建首页，整个案例中将使用到Bootstrap 中的各个模块。为了方便编程，将采用拆分的方式，各个模块单独编写，最后组合。

0.2 案例相关技术

1. BootStrap概述

1.2.1.1 什么是Bootstrap Bootstrap是基于HTML、CSS、JAVASCRIPT的前端框架（半成品）。其预定义一套CSS样式和与样式对象的jQuery代码，我们只需要提供固定的HTML结构，添加固定的class样式，就可以完成指定效果的实现。 Bootstrap是在jQuery的基础上工作的，可以理解Bootstrap是jQuery的一个插件。 Bootstrap使得Web开发更加快捷，代码优雅，美观大方。 Twitter的设计师Mark Otto和Jacob Thornton合作开发 Bootstrap基础入门使用的都是自带的CSS样式，高级开发中需要使用HTML5、CSS3、动态CSS语言Less进行自定义开发，javaEE课程中学习“基础入门”。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。中文官网：http://www.bootcss.com/ 1.2.1.2 什么是**响应式布局** 响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。 Bootstrap就是响应式布局最成功的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用CSS3 Media Query(媒体查询)。

  1. 环境搭建

1.2.2.1 下载 中文官网地址：https://v3.bootcss.com/getting-started/#download github地址：https://github.com/twbs/bootstrap/archive/v3.3.6.zip 5 BootStrap - 图1

1.2.2.2 目录结构 发布版内容文档（主要demo案例）字体（CSS3使用字体图标） JS工厂命令行待建工具模块JS less源码（动态CSS技术）

1.2.2.3 内容结构 发布版，即开始使用到的Bootstrap内容结构 5 BootStrap - 图3

5 BootStrap - 图4 1.2.2.4 简洁模板

| <!DOCTYPE html>

</head>
<body>
    <h1>你好，世界！</h1>
    <!-- 引入jQuery核心js文件 -->
    <script src="../../js/jquery-1.11.0.min.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="../../js/bootstrap.min.js"></script>
</body>

| | —- |

1.2.2.5 完整模板（了解）

| <!DOCTYPE html>

你好，世界！

| | —- |

0.3 首页之topbar

1.3.1 案例相关技术 1.3.1.1 布局容器 帮助手册：https://v3.bootcss.com/css/#overview-container Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。

…

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

…

1.3.1.2 栅格 帮助手册：https://v3.bootcss.com/css/#grid Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。栅格系统特点：

     1. “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
     1. 通过“行（row）”在水平方向创建一组“列（column）”。
     1. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
     1. 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
     1. 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
     1. 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
     1. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
     1. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
     1. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。
栅格参数：“col-*-*”

5 BootStrap - 图5 其中： large:lg 大尺寸 medium:md 中等尺寸 small:sm 小尺寸 x-small:xs 特小尺寸

案例：

.col-md-1

.col-md-8

.col-md-4

.col-md-6

| | —- | 1.3.1.3 按钮 帮助手册：https://v3.bootcss.com/css/#buttons 网站demo:下面各个按钮代码 5 BootStrap - 图6

| | | —- | .btn-lg、.btn-sm或.btn-xs可以设置按钮的不同尺寸 .active类设置按钮激活状态，其表现为被按下去（颜色更深、边框颜色更深、向内投射阴影）。 1.3.1.4 响应式工具 帮助手册：https://v3.bootcss.com/css/#responsive-utilities 5 BootStrap - 图7

例如： |

one

two

| | —- | 1.3.2 案例实现 |

登录注册首页

| | —- | 1. ## 0.4 首页之导航栏 1.4.1 案例分析 Bootstrap已经提供了导航的完整实例，通常情况下，只需要进行修改即可完成所要功能。帮助文档：https://v3.bootcss.com/components/#navbar 反色导航条：https://v3.bootcss.com/components/#navbar-inverted 1.4.2 案例实现 |