bootstrap框架使用心得

bootstrap使用心得分享

1.如何读官方文档

中文官方网站http://v3.bootcss.com

整体分三个大的模块：全局CSS样式、组件、JavaScript插件
内容构成：（通常都是）一个组件+介绍+基本案例+拓展（参数说明、与其他组件的联合使用）

2.核心思想

利用已有的css样式、组件、js插件，快速构建页面。

---

1. .container类相当于页面的版心，一共有两种版本，一个是固定宽度的；一个是width:100%;的。
2. 一般情况下我们的页面元素都包裹在container里面，这个container就是一个device-width中说到的虚拟的页面容器，主要是为了适配移动端不同屏幕尺寸。
3. row这个类代表行，col--这个类代表列。当我们使用bootstrap中给的预置的栅格系统时，可以通过设置每一行（.row）里面的列宽度(.col-xs-,.col-sm-,.col-md-,.col-lg-)来进行一行的快速布局

3.常用样式介绍

1. 表示大小的

-xs、-sm、-md、-lg
例如：btn-md、input-sm等等

2.表示情景的

-default、-primary、-danger、-info、-warning、-success
例如：btn-danger、input-warning等等，主要的表现形式是颜色的不同

3.排版的

左右对齐、居中对齐，根据使用情况不同有不同的样式。
例如：文本居中text-center、媒体左右对齐media-left、块级居中block-middle

4.常用组件介绍

想象一个购物网站、一个大众化的视频网站具有的内容

1.导航条

导航条指代的是形如淘宝、京东顶部商品搜索框那一块的区域，详细案例可以见bootstrap官网上导航条的介绍。

2.导航

很好理解，多是li标签包裹的很多个a标签，具有hover效果

3.输入框

很多，注册页、搜索框、评论都有可能用到。

4.菜单

bootstrap里面的菜单组件非常清晰，提供了菜单分割线等利于交互的功能。

5.按钮

按钮可以跟很多组件相互组合使用，例如按钮式的下拉菜单等等。

5.全局样式里辅助类的使用

1. 辅助类里面有很多小的特色功能，例如常用的下三角、关闭图标。这些类很简单，只需给span这类小的标签添加响应的样式就可以实现 下三角这类的效果。

总结一句话，bootstrap框架就是拿来让你快速建站用的，你可以通过预置的样式、组件、js插件很快的作出一个具有特效的网页。在这个过程中你需要什么组件你就去文档中查看相关的组件信息，把里面的例子拷贝到你的文件中，视情况作出一定调整就可以用了。

特别的，不要太过在意这个框架的底层实现，因为真正的前端工程师是多数会自己写原生的样式表，来达到更精美的效果。