bootstrap--笔记（1）

最新推荐文章于 2023-07-18 23:55:41 发布

Yi_xuan_sky

最新推荐文章于 2023-07-18 23:55:41 发布

阅读量326

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/Yi_xuan_sky/article/details/81985031

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

栅格系统

最多12列

.row 行，必须在容器里面.container或.container-fluid

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

.col-md-12 列，必须是row的直接子类

各种屏幕写法：<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6>.......</div>

如果出现在某种屏幕下，实现的效果高度与其他不一样时，应该使用响应式工具（在最下面有）

.col.md-offset-4 向右偏移4个列的宽度

.col-md-push-3 向后移3列

.col-md-pull-9 向前移9列

排版

为了确保适当的绘制和触屏缩放，在<head>添加<meta name="viewport" content="width=device-width, initial-scale=1">

<lead>突出样式

<h1>...<h6> .h1,h2---,.h6类

<small>副标题

<mark>

<abbr>略缩语鼠标移动到上面时，会有问好，设置了title属性，鼠标停在文本处，会显示title内容（完整内容），如果添加了.initialism这个类，字体会变小一些

<blockquote> 引用在blockqute里添加footer标签，用来标明来源

布局容器

.container用于固定宽度并支持响应式布局的容器

.contain-fluid用于 100% 宽度，占据全部视口（viewport）的容器

text

.text-center .text-left .text-right

.text-uppercase 大写 .text.lowercase 小写 .text.capitalize 首字母大写

.text-nowrap 不换行

list

.list-unstyled 移除前面的小圆点以及padding（只对直接子元素有效）

.list-inline 添加少量padding，将所有元素放到同一行

.dl.horizontal 将dt、dd同一行显示

代码

<code>

<kbd> 用户通过键盘输入的内容

<pre> 多行代码

<var> 变量

<samp> 程序输出内容

table

.table 添加少量的padding和水平分隔线

注意：下面的类名，添加时，都不要忘了写上table类，例如：<table class="table table-striped table-border">...

.table-striped：隔行变色（因为是基于:nth-child()实现的，所以IE8不支持）

.table-border：给每个单元格添加边框

.table-hover：鼠标悬停时

.table-condensed：使表格更加紧凑（padding减半）

.table-responsive：响应式表格

行或单元格：

.active：鼠标悬停时所设置的颜色（与table-hover设置的颜色一样）

.success：成功样式

.warning：警告

.danger：危险

.info：信息

.响应式表格：给.table的父元素添加.table-responsive类；<div class="table-responsive"><table class="table">...

Firefox对fieldset元素设置了一些影响width属性的样式，导致响应式表格出现问题（自己额外添加下面的代码）

@-moz-document url-prefix() {

fieldset { display:table-cell;}

}

form表单

.form-control <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;

.form-group 实际就是添加一个margin-bottom

.form-inline 变成inline-block（用在form），屏幕大于768时有效果

.sr-only 给label设置，隐藏label

.input-group-addon 在input-group里，插入在表单元素前

.form-horizontal 水平排列表单

.form-control 可以改变表元素样式（如果两个表单元素水平排列，默认的间隔会很大，使用了.form-control会挨的很近）

.checkbox 单选框、多选框一个一行显示

.checkbox-inline和.radio-inline 设置同一行显示

.disabled 移动到文字会有“不允许”图标

下拉菜单：给个form-control就可以了

.form-control-static 纯文本与label同一行

disable属性禁用

readonly属性只读

.help-block 帮助文本

.has-success 绿色提示

.has-warnning 褐色提示

.has-error 红色提示

添加额外图标：

<div class="form-group has-success has-feedback">
   <label class="control-label" for="inputSuccess2">Input with success</label>
   <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
   <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
   <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

has-feedback 设置相对定位

glyphicon glyphicon-ok form-control-feedback 设置图标（glyphicon-warning-sign三角形感叹号，glyphicon-remove红色×）

.input-lg .input-sm 设置表单元素变大变小

.form-group-lg .form-group-sm 设置整个表单组的大小

按钮

.btn 修改样式

.btn-default 默认样式

.btn-primary 首选项（深蓝色）

.btn-success 成功（绿色）

.btn-info 一般信息（蓝色）

.btn-warning 警告（深橙色）

.btn-danger 危险（深红色）

.btn-link 链接（相对于a）

.btn-lg 大 .btn-sm 小 .btn-xm 超小

.btn-block 设置宽度为100%，而且是块级元素

.active 处于激活状态（就是按下之后的样式）

图片

.img-rounded 图片四个角变圆（圆角，IE8不支持）

.img-circle 圆形图片，就像图像

.img-thumbnail 图片外加一个框

.img-responsive 设置图片为响应式

文本颜色

.text-muted 灰色

.text-primary 深蓝色

.text-success 绿色

.text-info 蓝色

.text-warning 深褐色

.text-danger 深红色

背景颜色

.bg-primary ... 与上面文本一样，就是没有muted

关闭按钮

.close 可以将button变成一个X

三角符号

.caret

快速浮动

.pull-left .pull-right （带！importing）

内容块居中

.center-block 转化成block元素，然后通过margin居中

清除浮动

.clearfix

显示与隐藏

.show .hidden（show的样式是display:block!important）

.sr-only 类可以对屏幕阅读器以外的设备隐藏内容（就是代表元素只在屏幕阅读器中显示）

.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来

.text-hide 可以用来将元素的文本内容替换为一张背景图。（只是隐藏了文本，还是不懂干嘛用的）

响应式工具

以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。（显示的时候是以什么类型显示）

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面 (≥992px)	大屏幕桌面 (≥1200px)
`.visible-xs-*`	可见	隐藏	隐藏	隐藏
`.visible-sm-*`	隐藏	可见	隐藏	隐藏
`.visible-md-*`	隐藏	隐藏	可见	隐藏
`.visible-lg-*`	隐藏	隐藏	隐藏	可见
`.hidden-xs`	隐藏	可见	可见	可见
`.hidden-sm`	可见	隐藏	可见	可见
`.hidden-md`	可见	可见	隐藏	可见
`.hidden-lg`	可见	可见	可见	隐藏