Bootstrap
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap相关的知识，希望对你有一定的参考价值。
1. 简介
Bootstrap 是最受欢迎的 html、CSS 和 JS 框架，它的源码是基于最流行的CSS 预处理脚本-Less和Sass开发的。
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。(<!DOCTYPE html>)
Bootstrap 是移动设备优先的,支持响应式的布局。
2. 栅格布局
通过一系列的行与列的组合来创建页面布局,一行最多12列.
100%宽度布局 .container-fluid
响应式的固定宽度布局 .container
.row: 行必须放置在容器内，以便获得适当的对齐和内边距
响应式的column
.col-lg-* 大屏幕 大桌面显示器 (≥1200px)
.col-md-* 中等屏幕 桌面显示器 (≥992px)
.col-sm-* 小屏幕 平板 (≥768px)
.col-xs-* 超小屏幕 手机 (<768px)
列偏移 .col-md-offset-*：实际上是设置了margin
列排序 .col-md-push- .col-md-pull-:本质上是通过left或right设置了位置
如果一行中包含了的列大于12，多余的列所在的元素将被作为一个整体另起一行排列。
3. 默认样式
标题: <h1> 到 <h6> 和 .h1 到 .h6 类
副标题:<small> .small
无样式列表: .list-unstyled
内联列表: .list-inline
水平列表: .dl-horizontal
表格
基本表格: .table
条纹状表格: .table-striped
带边框表格: .table-bordered
鼠标悬停: .table-hover
表格紧缩: .table-condensed
响应式表格: .table-responsive,会在小屏幕设备上（小于768px）水平滚动,当屏幕大于 768px 宽度时，水平滚动条消失.
表单
表单控件：.form-control .form-group
内联表单：.form-inline
内联单选框.radio-inline
内联多选框.checkbox-inline
静态控件：.form-control-static,当在表单中需将一行纯文本和label元素放置于同一行，为<p>元素添加 .form-control-static 类。
水平表单：.form-horizontal
按钮
表示按钮的三种形式： <a> <input> <button>
按钮类：.btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link
按钮状态类：
激活：.active
禁用：.disabled
按钮尺寸：.btn-lg .btn-sm .btn-xs
块级按钮：.btn-block
图片
响应式图片：.img-responsive
圆角图片：.img-rounded
圆形图片：.img-circle
缩略图：.img-thumbnail
mixin: img-responsive($display: block)
透明度:opacity(@opacity)
设置尺寸: size(@width @height) square(@size)
截断文本(用省略号代替): text-overflow()
隐藏文本(不是去除此元素): text-hide() hide-text()
重置文本样式: reset-text()
定义某一颜色label: label-variant($color)
定义某一颜色文本: text-emphasis-variant($parent, $color)
定义某一颜色背景: bg-variant($parent, $color)
text-align样式: .text-left .text-right .text-center .text-justify .text-nowrap
text大小写: .text-lowercase(全小写) .text-uppercase(全大写) .text-capitalize(首字母大写)
Other: .clearfix .pull-left .pull-right .center-block .hide .show .hidden .invisible
mixin:
透明度: opacity(@opacity)
设置尺寸: size(@width @height), square(@size)
截断文本(用省略号代替): text-overflow()
隐藏文本(不是去除此元素): text-hide(), hide-text()
重置文本样式: reset-text()
定义某一颜色label: label-variant($color)
定义某一颜色文本: text-emphasis-variant($parent, $color)
定义某一颜色背景: bg-variant($parent, $color)
占位符文本颜色：placeholder(@color: @input-color-placeholder)
字体图标: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff
徽章 .badge
缩略图 .thumbnail
面包屑: .breadcrumb
面板: .panel .panel-default
分页： .pagination
警告框： .alert .alert-success .alert-danger role="alert"
关闭按钮：<button type="button" class="close" >×</button>
以上是关于Bootstrap的主要内容，如果未能解决你的问题，请参考以下文章