首先，总归要先知道BootStrap到底是个啥，学前端的都知道，当学完h5，css3，以及js（这里js不说精通，入门中等级别就好，除非你要看源码）以后，BootStrap是个必学框架，也可能是小白们的的入门框架。
因为我们都知道一般普通的静态基本已经被淘汰，我们更多的需要去自适应pc，手机，平板，反正官方的广告词是：Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用，不过确实蛮方便的，但是用它以后，首先你要先了解到他自带一些基本的css样式、Css组件、Javascript插件。例如：按钮、表单和文字、轮播等等。所以有的时候根本不需要你自己去新建类新建id去写样式事件，一定要先熟悉他的基本才可以下手，因为好多童鞋，特别是会写网页的童鞋，我们说你给我用BootStrap来写个网页，结果傻乎乎的什么都还没了解明白就按静态的来写，自己写样式取类名，放事件，到头来自适应自适应没弄好，样式样式上也错的一塌糊涂。
所以啊，不管你是学过点基础还是纯小白，知道点准是好的，小白最好了，知道点还能出去吹吹牛皮，装装逼，哈哈哈
那首先，我们先要去官网下载BootStrap的包http://getbootstrap.com/，压缩版还是源码版自选
说好听点就是配置环境了啦，把他的css，js，jquery文件拖到你的网页头部引用，
然后你就可以开始写你的内部结构了，那结构的话呢说一下，这也是bootstrap牛的地方，他内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，不管在哪种屏幕上，栅格系统都会自动的每行row分12列
col-xs-*超小屏幕 手机 (<768px),
.col-sm-*小屏幕 平板 (≥768px),
.col-md-*中等屏幕 桌面显示器 (≥992px)
详情请看http://www.toutiao.com/i6391664349504602625/（how to use the bootstrap的栅栏布局）
其实不难，他的结构有点类似表格，只是定死了最多12个单元格而已，相当于他把页面变成了一个一个的单元格，然后在对应的格子里写内容
然后就是这些布局要写在.行（row）内，而row必须包含在.container（居中效果）中，以便为其赋予合适的排列（aligment）和内补（padding）。
使用行（row）在水平方向创建一组列（column）。
你的内容应当放置于列（column）内，而且，只有列（column）可以作为行（row）的直接子元素。
其实还是table，tr，td的结构类似
但是呢，结构虽然类似，效果确实大大的不同，比如某一格我不要规规矩矩待在这块地方，这时候就要用到偏移，使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
其实入门还是很简单的，先要知道她的栅格布局结构，然后再去研究他的自带css js各种组件，我们下次再讲。留点悬念，当然欢迎加群142991222 小白开始，我们走向巅峰
网友评论