bootstrap

boo’tstrap是个可以偷懒的网站，里面可以下载一个boo’tstrap压缩包，里面都是可以直接拿来用的样式，里面内容丰富，有动画，有字体图标，有响应式布局…。里面的css样式几乎都可以共用，甚至有些布局直接引用类名就直接做好了。这样减少了编写代码的压力，减少了代码量，更好的防止样式重复，增加了代码公用性。

如何引用

先在浏览器的搜索框搜索bootstrap
点击进入主页面

点击蓝色的那个bootstrap3中文文档(v3.3.7)进行压缩包下载
解压缩后放在需要的项目里面。
一般的css样式直接用link引入就好了而js文件要在script标签中添加src引入
注意：如果要引入jq文件要把jq的文件放在js文件的上面，因为bootstrap的js文件依赖jq所以应该先导入jq再导入bootstrap.js
使用的时候用class类名的方式引用

css3全局样式

栅格化系统（媒体查询）

媒体查询就是浏览器窗口缩小的时候或者需要兼容移动端和PC端的时候排版布局发生变化
栅格的内容

将父元素的内容的宽度等分为12份
通过col-xs-1~12(浏览器视窗小于768px时触发这个排版样式)
col-sm-1~12（浏览器视窗大于等于768px时触发的排版样式）
col-md-1~12(浏览器视窗大于等于992px时触发的排版样式)
col-lg-1~12(浏览器视窗大于等于1200px时触发的排版样式)
当使用这种方式排版时block会变为inline-block当空间容不下最后一个列时会换行

列偏移

使用.col-md-offset-1~12可以将列向右排列，实际上是用左外边距完成的
通过使用.col-md-push-1~12可以给元素排序，实际上是用定位的方式完成的

排版

标题

标题内可以给<small>标签或赋予类名.small用来标记副标题
例：

<h1>h1. Bootstrap heading <small>Secondary text</small>
</h1>

排版就是一些文本标签不怎么需要引用。直接使用语义标签即可。

表格

给table添加类名.table会直接让表格的宽度变为100%并添加行线
给table添加类名table-striped可以给tbody之内的每一行添加斑马条纹样式

条纹状表格是依赖：nth-childcss选择器实现的，而这一功能不被IE8支持
给table标签添加table-bordered为表格和表格里的每个单元格添加边框
通过给table标签添加table-hover可以让tbody的每一行对鼠标悬停状态做出响应
通过给table添加table-condensed类可以让表格更加紧凑，单元格中的内补(padding)均会减半
通过这些状态类可以为行或单元格设置颜色。

active(鼠标悬停时的颜色灰色)
success(成功色青绿色)
info(提示色蓝色)
warning(警告色黄色)
danger(危险色红色)

表单

单独的表单控件会被赋予一些默认样式。所有设置类名为.form-control的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。

<form action="" method="" class="form"><!-- form-group 表单组form-control 表单控件form-xxx 表示表单样式--><label for="" class="control-label col-sm-3">登录</label><div class="col-sm-9"><input class="form-control" type="" name="" id="" value="" class="form-control"/></div><button type="button" class="btn btn-danger form-control">提交</button><div class="input-group"><div class="input-group-addon">+</div><input type="text" class="form-control" name="" id="" value="" /><div class="input-group-addon">-</div></div></form>

不要将表单组和输入框组混合使用
不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

内联表单

为form元素添加form-inline可使其内容左对齐并且表现为inline-block级别的控件只试用于视口768宽度时(试图宽度再小就会使表单折叠)。

可能需要手动设置宽度
在Bootstrap中，输入框和单选/多选框控件默认被设置为width:100;宽度。在内联表单，我们将这些元素的宽度设置为width:auto;,因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。

一定要添加label标签
如果你没有为每个输入控件设置label标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为label设置.sr-only将其隐藏。还有一些辅助技术提供label标签的替代方案，比如aria-label、aria-labelledby或title属性。如果这些都不存在，屏幕阅读器可能会采取使用placeholder属性，如果存在的话，使用占位符来代替其他的标记，但要注意，这种方法是不妥当的。

<form class="form-inline"><div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></div><div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"></div><button type="submit" class="btn btn-default">Send invitation</button>
</form>

水平排列的表单

通过为表单添加.form-horizontal,并联合使用Bootstrap预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行，因此就无需添加.row了。

<form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div>
</form>

多选框和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

<div class="checkbox"><label><input type="checkbox" value="">Option one is this and that&mdash;be sure to include why it's great</label>
</div>
<div class="checkbox disabled"><label><input type="checkbox" value="" disabled>Option two is disabled</label>
</div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that&mdash;be sure to include why it's great</label>
</div>
<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one</label>
</div>
<div class="radio disabled"><label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>Option three is disabled</label>
</div>

内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

不带label文本的Checkbox 和 radio

如果需要 <label> 内没有文字，输入框（input）正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label）。

<div class="checkbox"><label><input type="checkbox" id="blankCheckbox" value="option1" aria-label="..."></label>
</div>
<div class="radio"><label><input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."></label>
</div>

下拉菜单

<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery.js"></script><!-- 因为bootstrap的js文件依赖jq所以应该先导入jq再导入boostrap.js --><script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script><!-- 下拉菜单1:外边容器 必须 .dropdown2:控制下拉项显示隐藏元素 必须有data-toggle="dropdown" 3:下拉列表 容器 .dropdown-menu--><div class="dropdown"><!-- 下拉菜单 --><!-- data-toggle="dropdown"实现下拉菜单js操作的关键--><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="glyphicon glyphicon-leaf"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div>

<select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
</select>

按钮

<button class="btn btn-success btn-sm me">success</button><button class="btn btn-info you">info</button><button type="button" class="btn btn-lg">lg特大按钮</button><button class="btn btn-danger btn-xs">danger</button><button type="button" class="btn btn-xs">xs超小按钮</button><button class="btn btn-primary">primary</button><button class="btn btn-default">default</button><button class="btn active">active激活状态</button><button type="button" class="btn btn-danger disabled">禁止使用</button><button type="button" class="btn btn-default btn-link">链接</button><button type="button" class="btn btn-warning">warning</button><button type="button" class="btn btn-block">block</button><button type="button" class="btn btn-group">group</button><!-- 相同点1：有基础类名，基础类名一般清空默认样式2：通过btn-XXX区分状态或者大小等效果--><!-- <img src="data:image/starry_sky.jpg" class="img-circle" ><img src="data:image/starry_sky.jpg" class="img-rounded" ><img src="data:image/starry_sky.jpg" class="img-thumbnail" > --><p class="text-info">富强民主文明和谐</p><p class="text-warning">自由平等公正法治</p><p class="text-center">爱国敬业诚信友善</p><p class="bg-danger">chinese</p><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button><span class="caret"></span><div class="pull-left">...</div><div class="pull-right">...</div><div class="center-block">center-block居中</div>

bootstrap使用及解析相关推荐

Bootstrap栅格布局解析
文章目录栅格布局初始栅格栅格布局源码 grid.less mixin中的grid.less clearfix.less 栅格布局源码分析流体容器&固定容器公共样式 @grid-gutt ...
Fabric v2.3 下载二进制文件和镜像bootstrap.sh脚本解析
下载二进制文件和镜像官网提示命令: curl -sSL https://bit.ly/2ysbOFE | bash -s 浏览器可直接打开 https://bit.ly/2ysbOFE 查看脚本(科学 ...
fileinput.js php,JS文件上传神器bootstrap fileinput的解析
这篇文章主要介绍了JS文件上传神器Bootstrap FileInput,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,具有一定的参考价值,感兴趣的小伙伴们可以 ...
Bootstrap IIFE
在Bootstrap源码(具体请看<Bootstrap源码解析>)和其他jQuery插件经常看到如下的写法: Js代码 +function ($) { }(window.jQuery) ...
java掌握_掌握Java 11的Constantdynamic
java掌握为了使JVM对动态语言更具吸引力,该平台的第七版已将invokedynamic引入了其指令集. Java开发人员通常不会注意到此功能,因为该功能已隐藏在Java字节码中. 简而言之,通过 ...
掌握Java 11的Constantdynamic
为了使JVM对动态语言更具吸引力,该平台的第七版已将invokedynamic引入了其指令集. Java开发人员通常不会注意到此功能,因为它隐藏在Java字节码中. 简而言之,通过使用invokedy ...
laravel 服务提供者
1.创建服务提供者命令 php artisan make:provider 名称 2.绑定服务 //单例绑定 $this->app->singleton('b', function () ...
PG主程序模块（Main）——boot模式
命令行指定–boot,执行AuxiliaryProcessMain(argc, argv),后台Postgres进程创建数据库集簇入口测试平台相关配置设置: postgres --boot -x0 ...
JavaScript IIFE
在Bootstrap源码(具体请看<Bootstrap源码解析>)和其他jQuery插件经常看到如下的写法: Js代码 +function ($) { }(window.jQuery) ...

bootstrap使用及解析