我的Bootstrap笔记,常用类名知识

轩陌

分类: Bootstrap 5481 4

查看更多

布局容器

.container:两边留白非全屏,固定宽度并支持响应式布局的容器。

.container-fluid:宽度100%宽,用于占据全部视窗的容器。

4种列(column)尺寸

.col-xs-*:   最小尺寸(Extra Small)

.col-sm-*: 小尺寸(small)

.col-md-*: 中尺寸(middle)

.col-lg-*:   大尺寸(large)

标题与文本类

.page-header:页头标题

.h1 -- .h6:标题类

    在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。

.lead:让段落突出显示

.text-left:文本左对齐

.text-center:文本居中对齐

.text-right:文本右对齐

.text-justify:两段对齐

.text-nowrap:默认对齐方式

.text-lowercase:全部为小写字母

.text-uppercase:全部为大写字母

.text-capitalize:首字母大写

.initialism:缩略语显示title的内容

    用法:<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

表单类

.form-inline:使表单组件一行显示(给form)

.form-horizontal:水平排列表单(给form)

.form-group:表单组

.input-group:输入框组

.form-control:输入框样式

表单验证:

.has-feedback:定义验证图标(父级)

.has-success:验证成功

.has-warning:警告

.has-error:错误

关联label:.control-label

提示信息:.help-block

提示图标:.form-control-feedback

带图标验证与提示信息写法


<div class="form-group has-success has-feedback">
  <label for="hasSuccess1" class="control-label">验证成功</label>
  <input type="text" id="hasSuccess1" class="form-control" placeholder="验证成功">
  <span class="help-block">您输入的信息是正确的</span>
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label for="hasWarning1" class="control-label">警告状态</label>
  <input type="text" id="hasWarning1" class="form-control" placeholder="警告状态">
  <span class="help-block">您当前输入的信息有误</span>
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label for="hasError1" class="control-label">验证错误</label>
  <input type="text" id="hasError1" class="form-control" placeholder="验证错误">
  <span class="help-block">手滑输错了吧</span>
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

按钮

    按钮样式:

.btn:定义按钮

.btn-default:默认

.btn-info:提示

.btn-primary:首选项

.btn-success:成功

.btn-warning:警告

.btn-danger:危险

.btn-link:链接类

    按钮尺寸:

.btn-xs:超小按钮

.btn-sm:小按钮

.btn-default:默认尺寸

.btn-lg:大按钮

.btn-block:块级按钮

   禁用的按钮:

为元素添加属性: disabled

为元素添加类:.disabled

    图片

.img-responsive:响应式图片

.img-rounded:添加一个6px的圆角

.img-circle:一个正圆的图片

.img-thumbnail:带相框的图片

文本颜色

.text-muted:提示,浅灰色:#999

.text-primary:主要,蓝色:#428bca

.text-success:成功,浅绿色:#3c763d

.text-info:通知消息,浅蓝色:#31708f

.text-warning:警告,黄色:#8a6d3b

.text-danger:危险,褐色:#a94442

背景颜色

.bg-primary:主要,蓝色:#428bca

.bg-success:成功,浅绿色:#3c763d

.bg-info:通知消息,浅蓝色:#31708f

.bg-warning:警告,黄色:#8a6d3b

.bg-danger:危险,褐色:#a94442

text-color

bg-color

  • 16人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
bootstrap、bootstrap类名大全、前端笔记

作者简介: 轩陌

打赏

生命的意义在于折腾,一直努力成长中,期待梦想实现的那刻。

共 4 条评论关于 “我的Bootstrap笔记,常用类名知识”

Loading...