Bootstrap 源码解析

前言

Bootstrap 是个CSS库,简单,高效。很多都可以忘记了再去网站查。但是有一些核心的东西需要弄懂。个人认为弄懂了这些应该就算是会了。源码看一波。

栅格系统

所谓的栅格系统其实就是一种布局方式。融合bootstap的自适应样式就会显的很酷炫。

例子:

    <div class="container">
<div class="row">
<div class="col-xs-6">
I am col-xs-6
</div>
<div class="col-xs-6">
I am col-xs-6
</div>
</div>
</div>

.container

.container = margin:0 auto + padding:0 15px + clearfix + media

1.margin 让盒子居中。

2.padding 让盒子与两边有一定的距离,为了美感。注意数字15。

3.clearfix为了防止与BFC有关的一些bug(这个有空再写一篇记录)。

4.media是为了相应式,根据不同的屏幕大小设置宽度。

注:.container-fluid 跟.container 的唯一区别就是没有相应式。

.row

.row = clearfix + margin:0 -15px

1.clearfix 是为了包含浮动的.col-xs-$ 们。

2.负的margin值是为了抵消.container的padding。

疑点:为什么要抵消掉.container的padding. 原因:抵消是为了尽量减少因为空间不足从而引起.contanier无法刚好的放下width加起来为100%的元素的元素。一个.col-xs-&元素最少width也有30px(15+15),也就是说12个.col-xs-1最少也要占360px,如果不用.row 抵消的话就需要390px的盒子来放置。
其实扯远了,这种极端的情况很少会发生,主要还是看你想不想padding15px 之后再布局。

.col-xs-$

.col-xs-$ = float:left + position:relative + padding:15px + width:$$%(media);

1.float:left 一行放多个div等元素的原理,还有就是让.col-xs-offset-$ 这样的类生效,原理为margin-left 。

2.position:relative 让.col-xs-pull-$ 和 .col-xs-push-$ 能够生效。原理为left:***,right:***

3.padding 为了每个元素有间隔,这里不用担心会让元素占据更多空间,原因为box-sizing:border-box;

4.media 让元素能够根据不同的屏幕大小显示不同样式。最小的屏幕用.col-xs-$设置的宽度,再大一点用.col-sm-$的,再大用.col-md ,直到.col-lg.

注:嵌套使用栅格系统的时候,原则上要用.row 包起来。原因在上面又说,上面懂了,这里也就懂了,不懂得在看一看,css不是编程语言很好懂的。

表单

bootstrap 对表单控件做了处理,让表单控件更美观和规范,只需要加.form-control 在表单控件上就可以了

.form-control = display:block + width:100% + goodstyle

1.前面两个是为了让表单自成一行(如论元素是否浮动)。
2.一些margin和vertical-align等熟悉来美化表单,并让管理他们的高度和位置。

简单的应用这个类是不足够满足需求的。下面是一般表单布局的需求和实现方式。

label与控件各种占一行。

<form>
<div class="form-group">
<label class="control-label">介绍</label>
<input class="form-control" type="input">
</div>
</form>

这个是最简单的实例,在bootstrap官网有,没啥好说的。
1 .form-group 在这里就是margin-bottom:15px;
2 .control-label 规定label的高度和行高等使其规范。

许多控件与label在同一行

<form class="form-inline">
<div class="form-group">
<label class="form-label">选择标签:</label>
<button class="btn btn-sm btn-info" v-on:click=" showselect" type="button">选择标签</button>
<samll class="form-control-static">已选择{{select}}个标签</small>
</div>
<div class="form-group">
<label class="form-label">选择关系</label>
<select class="form-control" id="relation">
<option value="OR">至少包含一个</option>
<option value="AND">同时包含</option>
</select>
</div>
</form>

.form-inline 主要的作用就是控制子元素中的.form-control

.from-inline .form-control = display:inline-block + width:auto + vertical-align

样式表一贴出来原理应该就不需要再说什么了。但是这个布局当你觉得每个form-group 太近的时候,改动就容易犯错了,因为你很可能选择bootstrap的栅格布局,那就容易出问题。如:

<form class="form-inline">
<div class="form-group col-xs-4">
<label class="form-label">选择标签:</label>
<button class="btn btn-sm btn-info" v-on:click=" showselect" type="button">选择标签</button>
<samll class="form-control-static">已选择{{select}}个标签</small>
</div>
<div class="form-group col-xs-6">
<label class="form-label">选择关系</label>
<select class="form-control" id="relation">
<option value="OR">至少包含一个</option>
<option value="AND">同时包含</option>
</select>
</div>
</form>

这样的布局乍一看,没有什么问题,但是当缩小屏幕大小的时候就容易出问题。所以我建议不要使用来栅格布局来拉开距离,可以结合.pull-left 和 .
col-xs-offset-$ 来,这样的自适应能力就好很多,如:

<form class="form-inline">
<div class="form-group pull-left">
<label class="form-label">选择标签:</label>
<button class="btn btn-sm btn-info" v-on:click=" showselect" type="button">选择标签</button>
<label class="form-control-static">已选择{{select}}个标签</label>
</div>
<div class="form-group pull-left col-xs-offset-1">
<label class="form-label">选择关系</label>
<select class="form-control" id="relation">
<option value="OR">至少包含一个</option>
<option value="AND">同时包含</option>
</select>
</div>
</form>

label于控件共同占一行

这种布局就是使用栅格布局。

<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">选择关系</label>
<div class="col-xs-4">
<select class="form-control" id="relation">
<option value="OR">至少包含一个</option>
<option value="AND">同时包含</option>
</select>
</div>
</div>
</form>

form-horizontal > .form-group = clearfix ;
form-horizontal > .control-label = text-align:right;

这里需要注意的就是select等控件需要用盒子包起来。

转载:Bootstrap 源码解析的更多相关文章

  1. [Bootstrap 源码解析]——bootstrap源码之初始化

    bootstrap源码之初始化 我们先来分析normalize.less编译后的源码,我们知道normalize.css是一个专门将不同浏览器的默认css特性设置为统一效果的css库,它和reset. ...

  2. Bootstrap 源码解析(转)

    1.Bootstrap的作用域 2.Bootstrap的类定义 3.Bootstrap的插件定义 4.Bootstrap的事件代理 5.Bootstrap的对象数据缓存 6.Bootstrap的防冲突 ...

  3. Bootstrap 源码解析

    前言 Bootstrap 是个CSS库,简单,高效.很多都可以忘记了再去网站查.但是有一些核心的东西需要弄懂.个人认为弄懂了这些应该就算是会了.源码看一波. 栅格系统 所谓的栅格系统其实就是一种布局方 ...

  4. Appium Android Bootstrap源码分析之命令解析执行

    通过上一篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>我们知道了Appium从pc端发送过来的命令如果是控件相关的话,最终目标控件在b ...

  5. jQuery整体架构源码解析(转载)

    jQuery整体架构源码解析 最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性, ...

  6. 【转载】Xutils3源码解析

    Github源码地址:https://github.com/wyouflf/xUtils3 原文地址 :http://www.codekk.com/blogs/detail/54cfab086c476 ...

  7. 【转载】okhttp源码解析

    转自:http://www.open-open.com/lib/view/open1472216742720.html https://blog.piasy.com/2016/07/11/Unders ...

  8. 【转载】FloatingActionButton源码解析

    原文地址:https://github.com/Rowandjj/my_awesome_blog/blob/master/fab_anlysis/README.md loatingActionButt ...

  9. 【转载】Scroller源码解析

    原文地址:https://github.com/Skykai521/AndroidSdkSourceAnalysis/blob/master/article/Scroller%E6%BA%90%E7% ...

随机推荐

  1. 可用于在 Microsoft.NET Framework 4.0 中的 ASP.NET 浏览器定义文件的修补程序

    http://support.microsoft.com/kb/2600088 此修补程序为 Internet Explorer 和 Mozilla Firefox 在浏览器定义文件引入了更新的定义. ...

  2. 分布式消息队列RocketMQ--事务消息--解决分布式事务

    说到分布式事务,就会谈到那个经典的”账号转账”问题:2个账号,分布处于2个不同的DB,或者说2个不同的子系统里面,A要扣钱,B要加钱,如何保证原子性? 一般的思路都是通过消息中间件来实现“最终一致性” ...

  3. 【ThreadLocal】使用ThreadLocal实现线程安全

    非线程安全 public class UnSafeThreadLocalDemo { private int count = 0; public static void main(String[] a ...

  4. C#连接Access数据库显示未在本地计算机注册解决方法

    C#连接数据库时会出错 语句如下 string mystr = @"Provider=Microsoft.ACE.OLEDB.12.0; Data Source=C:\Users\hasee ...

  5. PAT 乙级 1018 锤子剪刀布 (20) C++版

    1018. 锤子剪刀布 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 大家应该都会玩“锤子剪刀布”的游 ...

  6. [转][Oracle]常见报错及处理

    IIS 在安装 Oracle Client 后,需要命令行执行: iisreset 1.ORA-00257 参考自:https://jingyan.baidu.com/article/f71d6037 ...

  7. org.apache.ibatis.binding.BindingException: Parameter 'idList' not found解决办法

    https://blog.csdn.net/qq_28379809/article/details/83342196 问题描述 使用Mybatis查询数据库报错: org.apache.ibatis. ...

  8. 查看设备uuid的命令-blkid

      查看设备uuid的命令-blkid 在关联/etc/fstab的时候可以使用   [root@mapper ~]# blkid /dev/sda1: UUID="285510be-b19 ...

  9. mysql root情况

          180829 11:15:20 [ERROR] Fatal error: Please read "Security" section of the manual to ...

  10. Android-PullToRefresh 下拉刷新增加setOnItemLongClickListener

    项目地址:https://github.com/chrisbanes/Android-PullToRefresh 不知道为什么这个项目没有给listview 加  OnItemLongClickLis ...