一、基础知识

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

【分享】bootstrap学习笔记的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  3. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  4. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  5. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  6. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  7. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  8. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  9. bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

随机推荐

  1. bzDemo

    <Public> <property name="Types"> <get/> </property> <method nam ...

  2. Python初识与简介【开篇】

    目录 1.扯淡 2.Python历史 3.Python简介 4.Python应用 5.为什么是python而不是其他语言? 6.Python的种类 7.Python的特点 8.Python设计哲学 9 ...

  3. C#中“类似GridView等控件”的前台显示与后台数据变化之间的关系

    最近用dev的treelist,gridcontrol等控件,这些控件显示数据都需要进行DataTable等数据源的绑定,而经理又要求可以随时更改其中的内容,刚开始总是不断的刷新控件.更新控件的数据源 ...

  4. php笔记(八)PHP类与对象之抽象类

    <?php //通过abstract关键字定义一个抽象类 abstract class ACanEat{ //通过abstract关键字定一个不用具体实现的抽象方法eat() abstract ...

  5. Anaconda 安装概要

    Anaconda 作为开源项目,集成了Python的大部分第三方包,如:pandas,Numpy,scipy等. 1. 下载地址:https://www.continuum.io/downloads ...

  6. Oracle 字符集小结(遇到一例子:查询结果列标题为汉字,但是显示为‘?')

    问题处理方式: 查询:select userenv('language') from dual; 对比电脑环境变量NLS_LANG的值与查询结果是否一致,如果不一致,修改电脑环境变量NLS_LANG ...

  7. SweetTips: 快意灵动的Android提示库!

    此文章是我在简书的文章,自行搬到博客园.简书地址:SweetTips: 快意灵动的Android提示库! 源码及所在DEMO已上传至GitHub:SweetTips,欢迎大家提Bug,喜欢的话记得St ...

  8. Web Service循序渐进学习

    1.Web service 是什么? (WebService 是可以通过互联网远程访问调用的应用程序,实现数据传输共享.这种应用程序理解为不同服务提供帮助.能够支撑实现应用程序发布访问的技术可以称为W ...

  9. python如何保证多个线程同时修改共享对象时不出错!

    import threadingimport timenumber = 0lock = threading.RLock() #是Lock()的升级版,用Rlock()即可def run(num): l ...

  10. Spring对jdbc支持

    4. Spring对jdbc支持 spring对jdbc提供了很好的支持 体现在: 1.Spring对C3P0连接池的支持很完善 2.Spring对jdbc提供了jdbcTemplate来简化jdbc ...