Bootstrap - 全局css样式类
状态类
通过这些状态类可以为行或单元格设置颜色。
.active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作
Div
.container .row .container-fluid
栅格参数
.col-xs-* .col-sm-* .col-md-* .col-lg-*
列偏移
http://v3.bootcss.com/css/#grid-offsetting
使用这个就不需要强制通过补满栅格12列来布局了
.col-xs-offset-* .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
响应式工具
.visible-xs-* .visible-sm-* .visible-md-* .visible-lg-* .hidden-xs .hidden-sm .hidden-md .hidden-lg
表单
http://v3.bootcss.com/css/#forms-horizontal
.form-horizontal .form-group .form-control .form-control-static .form-inline .control-label .input-group > .input-group-addon + .form-control + .input-group-addon 我最喜欢的样式
按钮Btn
role="button" .btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .btn-(xs/md/sm/lg)
表格
http://v3.bootcss.com/css/#tables
.table .table-striped .table-bordered .table-hover .table-condensed .table-responsive 将任何.table
元素包裹在.table-responsive
元素内,即可创建响应式表格
多选和单选框
http://v3.bootcss.com/css/#-24
.disabled .radio .radio-inline .checkbox .checkbox-inline
校验状态
.has-warning .has-error .has-success
控件尺寸高度
通过 .input-lg
类似的类可以为控件设置高度,通过 .col-lg-*
类似的类可以为控件设置宽度。
.input-(xs/md/sm/lg) .form-group-(xs/md/sm/lg)
图片形状
img-rounded img-circle img-thumbnail
文本颜色
.text-muted .text-primary .text-success .text-info .text-warning .text-danger
情境背景色
.bg-primary .bg-success .bg-info .bg-warning .bg-danger
工具类
.pull-left .pull-right .center-block 让内容块居中 .clearfix .
show
.hidden
Bootstrap - 全局css样式类的更多相关文章
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...
- Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...
- Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
- bootstrap全局css样式
以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
随机推荐
- Java for LeetCode 045 Jump Game II
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- Cocos2d-JS游戏导演
什么是游戏的导演 具体来说,Cocos2d-JS中的导演是一个对象,它负责设置游戏的运行环境,控制游戏的住循环并且管理场景和场景的切换. 导演的任务 Cocos2d-JS中导演对象名为:cc.dire ...
- SimpleDataFormat格式
public class SimpleDateFormat extends DateFormat SimpleDateFormat 是一个以国别敏感的方式格式化和分析数据的具体类. 它允许格式化 (d ...
- android 中如何分析内存泄漏
转载:http://blog.csdn.net/fulinwsuafcie/article/details/8363218 前提条件: 1,电脑安装了java 运行环境 2,手机端开启了 USB 调试 ...
- 线段覆盖4(codevs 3012)
题目描述 Description 数轴上有n条线段,线段的两端都是整数坐标,坐标范围在0~1000000,每条线段有一个价值,请从n条线段中挑出若干条线段,使得这些线段两两不覆盖(端点可以重合)且线段 ...
- protostuff简单应用
protobuf是谷歌推出的与语言无关.平台无关的通信协议,一个对象经过protobuf序列化后将变成二进制格式的数据,所以他可读性差,但换来的是占用空间小,速度快.居网友测试,它的序列化效率是xml ...
- php jquery ajax
.php文件如下<?php header('Content-Type:text/html;charset=utf-8'); ?> <script type="text ...
- hdu 4021 n数码
好题,6666 转自:http://www.cnblogs.com/kuangbin/archive/2012/08/23/2652410.html 题意:给出一个board,上面有24个位置,其中2 ...
- 【现代程序设计】homework-06
1) 把程序编译通过, 跑起来. 读懂程序,在你觉得比较难懂的地方加上一些注释,这样大家就能比较容易地了解这些程序在干什么. 把正确的 playPrev(GoMove) 的方法给实现了. 如果大家不会 ...
- 什么是AIDL(转)
跨进程访问的服务称为AIDL(Android Interface Definition Language)服务. AIDL:Android Interface Definition Language, ...