【分享】bootstrap学习笔记
2016-08-26 11:10
417 查看
一、基础知识
1.整体架构
以响应式设计为理念,css组件、js插件+jquery、基础布局组件和12栅格系统搭建。
1.1响应式设计:结合media query查询,适应更多设备,自动适应用户的设备环境,不必为每个终端做一个特定的版本。
2.css12栅格系统
将容器平分12份,行(row)必须包含在.container中,只有列(column)可作为行的直接子元素。ps:如果要充满屏幕100%显示,那就不能用container样式了,因为该样式针对4种不同的屏幕大小固定了尺寸,可自己定义一个样式,注意修复container的-15px的外边距。
3.基本用法
3.1列组合:使用数字来合并,有点类似colspan,col-md-4,其中col指的是列,md指的是中型屏幕,4指的是12列中占4列的宽度,实现方式为左浮动加宽度百分比
3.2列偏移:使用offset来定义,具体样式如:.col-md-offset-*,实现原理是利用1/12的margin-left
3.3列排序:通过push(推)和pull(拉)来改变左右浮动,以左为基准
4.响应式栅格
4.1跨设备组合定义:md-中屏,超小-xs,小型-sm,大屏-lg。向大兼容,不支持向小兼容。
4.2清除浮动:在定义支持多个设备的样式时,比如:col-xs-6 col-sm-3,在超小屏有可能会发生错位,需要用clearfix来清除,比如:<div class="clearfix visible-xs"></div>,visible-xs是指当能够在超小屏幕上显示
5.css组件
原理:附加和覆盖的原则,后边的样式覆盖掉前面的样式
5.1颜色样式:默认为很多组件提供了5种颜色,分别是primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)
5.2尺寸样式:一般组件都有4种尺寸:超小(xs)、小型(sm)、普通(default也可以不写,默认)、大型(lg)。
同一个组件的不同类型的样式可以组合到一起使用,比如颜色样式btn-success和尺寸样式btn-lg,示例:btn btn-success btn-lg
1.整体架构
以响应式设计为理念,css组件、js插件+jquery、基础布局组件和12栅格系统搭建。
1.1响应式设计:结合media query查询,适应更多设备,自动适应用户的设备环境,不必为每个终端做一个特定的版本。
2.css12栅格系统
将容器平分12份,行(row)必须包含在.container中,只有列(column)可作为行的直接子元素。ps:如果要充满屏幕100%显示,那就不能用container样式了,因为该样式针对4种不同的屏幕大小固定了尺寸,可自己定义一个样式,注意修复container的-15px的外边距。
3.基本用法
3.1列组合:使用数字来合并,有点类似colspan,col-md-4,其中col指的是列,md指的是中型屏幕,4指的是12列中占4列的宽度,实现方式为左浮动加宽度百分比
3.2列偏移:使用offset来定义,具体样式如:.col-md-offset-*,实现原理是利用1/12的margin-left
3.3列排序:通过push(推)和pull(拉)来改变左右浮动,以左为基准
4.响应式栅格
4.1跨设备组合定义:md-中屏,超小-xs,小型-sm,大屏-lg。向大兼容,不支持向小兼容。
4.2清除浮动:在定义支持多个设备的样式时,比如:col-xs-6 col-sm-3,在超小屏有可能会发生错位,需要用clearfix来清除,比如:<div class="clearfix visible-xs"></div>,visible-xs是指当能够在超小屏幕上显示
5.css组件
原理:附加和覆盖的原则,后边的样式覆盖掉前面的样式
5.1颜色样式:默认为很多组件提供了5种颜色,分别是primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)
5.2尺寸样式:一般组件都有4种尺寸:超小(xs)、小型(sm)、普通(default也可以不写,默认)、大型(lg)。
同一个组件的不同类型的样式可以组合到一起使用,比如颜色样式btn-success和尺寸样式btn-lg,示例:btn btn-success btn-lg
相关文章推荐
- jQuery基于BootStrap样式实现无限极地区联动
- BootStrap无限级分类(无限极分类封装版)
- Bootstrap初级学习(一)表单<form>
- Bootstrap的日期选择插件DateTime Picker增强版
- bootstrap表格
- bootstrapValidator remote 的接受 验证 值
- Bootstrap 弹出框modal上层的输入框不能获得焦点问题
- bootstrap中,navbar 宽度等同浏览器窗口问题。
- BootStrap栅格系统原理 笔记
- bootstrap suggest 前端输入框下拉提示、搜索建议插件
- Boostrap-table.js+bootstrap-editable.js增删改查完整案例
- 使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项
- bootstrap中的居左和居右
- Bootstrap table两种分页示例
- 5套bootstrap框架后台管理系统模板
- SPSS(1)--安装hayes process插件及用Bootstrap方法进行中介效应检验
- BootStrap-comboTree 个人原创封装
- 《bootstrap用户手册》读书笔记(2)
- bootstrap3学习:响应式布局layout
- 每周一书-2016年8月15日到21日(bootstrap基础教程)获奖读者公布