bootstrap 笔记

程序员文章站 2023-12-28 20:31:46

...

<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

在线的bootstrap组建

<meta name="viewport" content="width=device-width, initial-scale=1">

设置移动端优先

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

设置移动端优先并禁用缩放功能

.container

容器两边留白

.container-fluid

容器 100%宽度

.row

行必须包含在 .container 中

.col-xs-* .col-sm- .col-md- .col-lg-

列必须包含在 .row 中分别对应 <768px ≥768px ≥992px ≥1200px

.col-*-offset-*

偏移列必须包含在 .row 中

.col-md-push-* 和 .col-md-pull-*

排序列改变显示的先后

.h（1|2|3|4|5|6）

标题

.small

使标签内的文字设置为父容器字体大小的 85%

.lead

可在添加在<p> 标签内使文字突出

使标签内的文字高亮

使标签内的文字添加删除线

使标签内的文字添加下划线

使标签内的文字加粗

<em>

使标签内的文字变为斜体

.text-(left|center|right|justify|nowarp)

居左居右居中

.text-(lowercase|uppercase|capitalize)

小写大写首字母大写

.initialism

缩略语

<address>

地址

引用样式

.blockquote-reverse

可以使引用右对齐

.list-unstyled .list-inline

列表无样式显示在一行

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

带有描述的列表

.dl-horizontal

可以使描述在一行显示

.text-overflow

自动截断

<kbd>

标记键盘输入的内容

.pre-scrollable

可以给<pre> 添加滚动条

<var>

标记变量

.table

可以给<table> 添加少量的padding和水平方向的分隔线

.table-striped

可以给<tbody> 添加斑马纹（不支持 IE8）

.table-bordered

给表格添加边框

.table-hover

可以给<tbody> 添加鼠标悬停

.table-condensed

紧凑表格

.active .success .info .warning .danger

添加默认选中额外颜色信息

.table-responsive

将 .table包含在其中可创建响应式表格

.form-control

所有的 <input>、<textarea> 和 <select> 默认设置width：100%

.form-horizontal

水平的表单名称+输入框

text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color

html5支持的输入框类型

.disabled

禁用

.checkbox-inline 或 .radio-inline

横向显示单复选

multiple

默认多项显示的select （注意不是class 是属性）

.form-control-static

<p>元素添加后可在表单中与label同行显示

.has-warning、.has-error或 .has-success

给表单添加校验状态

.has-feedback

给<input class="form-control"> 添加校验图标

`.sr-only` 类来隐藏表单控件的 `<label>`

.col-lg-*

设置空间高度

.btn .btn-dufault

可以为<a>、<button> 或 <input>设置按钮样式导航和导航条组件只支持 <button> 元素。

如果用<a> 作为按钮，并不使用其链接功能 role="button"，添加属性

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

.btn-block

可以使按钮具有父级元素一样的宽度

opacity

该属性可以使按钮禁用

.img-responsive

让图片支持响应式布局实际上设置了 max-width: 100%;、 height: auto; 和 display: block;

设置了该类的图片想要居中应该使用 .center-block

.img-rounded .img-circle .img-thumbanil

给img标签设置可以使图片设置为圆角原型外边框

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

关闭按钮

<span class="caret"></span>

下拉三角

.pull-left .pull-right

左右浮动

.navbar-left .navbar-right

导航条的左右浮动

.center-block

内容居中

.clearfix

清除浮动

.show 和 .hidden

显示隐藏 3.0以后建议使用 .hidden 或 .sr-only

.invisible

可以隐藏元素，但是占据排版

.text-hide

可以将文本内容显示为图片

bootstrap 笔记

`.sr-only` 类来隐藏表单控件的 `<label>`