bootstrap搭建网站思路和实战小案例

00、概念理解

Bootstrap 是一个HTML、CSS 和 JS 框架。
简单的说就是把细节都提前设置默认值、组件模板化并且规范统一命名，使用过程中直接修改参数即可，不用过多考虑浏览器兼容性。
亮点是：栅格化使得开发响应式布局、移动设备优先更加方便。

01、基本工程搭建和内容引入

• 1.1 bootstrap里面的动态效果都是基于jquery实现的，所以一开始lab里面需要提前将两者的原文件都下载好，方便后面引入。

• 1.2 在通用框架上需要做自己自定义的样式和效果，所以自己的三件套 css、fonts、js要提前准备。imgs和src基本的素材准备。
  

• 1.3 引入css和js，并在meta里面声明viewport的规范，从而实现元素在移动端的自适应。

• 1.4 使用下面这段代码使用的是Edge 。模式Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。

• 1.5 通过有语义的标签进行基本布局。

02、头部知识点

• 2.1 头部包含2块，一个顶部通栏和一个导航。
  

• 2.2 知识点：栅格化（响应显示）、全局css样式、按钮生成器（bbg一个专门针对bootstrap按钮定制的工具）、字体图标的制作和引入@font-face、导航条组件、模态框。

03、轮播图

• 响应式的轮播图直接通过carousel.js来实现。本身并不是很复杂，优化空间在于如何通过大小图片来保证图片在各种屏幕下相对良好的展示。这里也又一次的体现了bootstrap的优势：快和响应式。
• 本案例中通过:监听屏幕大小后，大屏直接设置背景图，小屏插入图片，并在切换的时候清空小图来处理。

04 、关于我们

• 这个里面相对的将没有什么内容，主要自定义了一下css的样式，伸缩布局。 display：flex;
• 还有就是全局css样式里面的img相关圆角及响应式样式。

05 、产品介绍

• 这里首先是使用了选项卡，需要注意的是控制器需要通过id和下面的内容结合。
• 再有就是一些很琐碎的组件使用。比如：面包屑导航、徽章。本例中徽章的场景并不是很好。给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。

-从这里往下应该算是脱离新手区了。 基本上对于组件复用、样式重新调整、以及响应式和栅格都有了实践，接下来，就是把文档过一边看看。

06 、热门课程

• 媒体对象组件。 可以分为左中右，然后根据每个地方设置样式。 这个组件应该文字列表相对的会用的比较多一些。

07 、友情链接

• 列表的项目符号隐藏，inline-block。

08 、底部

• 没有新知识点了，一个弹出框，似乎没有什么应用场景。为任意元素添加一小块浮层，就像 iPad 上一样，用于存放非主要信息。注意事项就是：需要在js里面初始化一下。

总结： “复用” 和 “分解”在这里面体现的淋漓尽致，带来的就是效率。 嗯，模具！

效果图：