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. EXSI6.5复制文件太慢的解决方法

    听说裸金属服务器性能比在windows中安装VMware workstations要好,就在电脑上安装了一个EXSI6.5. 可是在复制文件时很慢,一个3G的文件复制了两三个小时,还时常担心网络会断, ...

  2. spring cloud-前端跨域问题的解决方案

    当我们需要将spring boot以restful接口的方式对外提供服务的时候,如果此时架构是前后端分离的,那么就会涉及到跨域的问题,那怎么来解决跨域的问题了,下面就来探讨下这个问题. 解决方案一: ...

  3. solrCloud index search (图)

    结合网上的资料,抄袭了几张图,记录下. 1.solrcloud-collection/shard/replica 1.Replica.Leader是core的角色,在index.search的过程中作 ...

  4. 还原MongoDB dump备份出来的Bson数据

    集合名 数据库名 备份文件位置 mongorestore --collection people --db accounts dump/accounts/people.bson

  5. 网站优化URL需要注意的几个细节

     原文地址:http://www.douban.com/note/474016612/   一个好的URL结构无论是对搜索引擎,还是用户,都具有非常重要的作用,那么什么样的URL才是既能面向搜索引擎, ...

  6. dropwizard使用cors支持跨域浏览器取不到自定义header问题

    dropwizard支持cors的配置如下: public void run(Configuration conf, Environment environment) { // Enable CORS ...

  7. go中redis使用小结

    最近做了个关于redis的项目,那么就整理下遇到和未遇到的问题 1.redis的简介安装 2.redis的数据结构 3.Redis基本使用 4.Redis的并发 5.Redis的落地 一.redis的 ...

  8. Ubuntu 搭建 Zerotier One MOON 根目录服务器

    原文转摘:http://www.congan.wang/archives/947 博主倒腾了一天,总算搞定了,主要是受到各种搭建教程的错误引导,导致关键过程错误.官网的MOON搭建教程:https:/ ...

  9. Sep 10th 2018

    今天是教师节,祝家里的两位‘老师’节日快乐.一位是幼儿园的保健医,另一位是驾校的教练.不能说是真正的老师,但作的也是传道授业之工作.今天看到新闻,马云要在明年的今天辞去现任阿里巴巴主席一职,继续投身他 ...

  10. 几个常用的SQL 时间函数

    --当月第一天declare @startFirstDate datetimeset @startFirstDate=dateadd(dd,datediff(dd,0,getdate()),-day( ...