返回 登录
22

小白们来八一八Bootstrap的那些犄角嘎达事

首先,总归要先知道BootStrap到底是个啥,学前端的都知道,当学完h5,css3,以及js(这里js不说精通,入门中等级别就好,除非你要看源码)以后,BootStrap是个必学框架,也可能是小白们的的入门框架。
因为我们都知道一般普通的静态基本已经被淘汰,我们更多的需要去自适应pc,手机,平板,反正官方的广告词是:Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用,不过确实蛮方便的,但是用它以后,首先你要先了解到他自带一些基本的css样式、Css组件、Javascript插件。例如:按钮、表单和文字、轮播等等。所以有的时候根本不需要你自己去新建类新建id去写样式事件,一定要先熟悉他的基本才可以下手,因为好多童鞋,特别是会写网页的童鞋,我们说你给我用BootStrap来写个网页,结果傻乎乎的什么都还没了解明白就按静态的来写,自己写样式取类名,放事件,到头来自适应自适应没弄好,样式样式上也错的一塌糊涂。
所以啊,不管你是学过点基础还是纯小白,知道点准是好的,小白最好了,知道点还能出去吹吹牛皮,装装逼,哈哈哈
那首先,我们先要去官网下载BootStrap的包http://getbootstrap.com/,压缩版还是源码版自选
小白们来八一八Bootstrap的那些犄角嘎达事

说好听点就是配置环境了啦,把他的css,js,jquery文件拖到你的网页头部引用,
小白们来八一八Bootstrap的那些犄角嘎达事

然后你就可以开始写你的内部结构了,那结构的话呢说一下,这也是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)的宽度。
小白们来八一八Bootstrap的那些犄角嘎达事

小白们来八一八Bootstrap的那些犄角嘎达事

其实入门还是很简单的,先要知道她的栅格布局结构,然后再去研究他的自带css js各种组件,我们下次再讲。留点悬念,当然欢迎加群142991222 小白开始,我们走向巅峰
小白们来八一八Bootstrap的那些犄角嘎达事

评论