一、文本相关样式

  文本格式(用于块状标签):
text-left:向左对齐文本;text-center:居中对齐文本;text-right:向右对齐文本;text-justified;text-nowrap;
  文本增强标签:
small,strong,em;
  文本修饰(用于p,a等包含文本的标签):
text-muted(本行内容是减弱的);text-primary;text-success;text-info;text-warning;text-danger;text-info;text-lowercase;text-uppercase;text-capitalize;

  文本缩写标签:

<abbr>,得到更小字体可以添加initialism类
  文本地址标签:

address
  文本引用标签:

blockquote 使用类blockquote-inverse可以使得引用右侧对齐

  列表相关类:

list-unstyled;list-inline;dl-horizontal

二、bootstrap表格

  可以应用于<table>的类:

基础类table,table-striped;table-bodered;table-hover;table-condensed;

  可以应用于<tr>,<th>和<td>的类

.active;.success;.info;.warning;.danger

通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

三、bootstrap表单

1.向要创建的<form>元素添加role="form'

2,如果是标签和Input空间,可以把一组标签和控件放在一个class .form-group的<div>中,以便获得最佳间距,这会在div周围添加一条边框。

3,如果input周围有前后缀(包括文本,按钮,下拉菜单等)。此时,向其父div增添类.input-group(基本类,再添加其他类如 .input-group-lg、input-group-sm、input-group-xs可以调整大小)。如果前后缀是文本、复选框,单选框,就给前缀后缀所在的span(该span位于input的前面或者后面),添加类:.input-group-addon;如果前后缀是按钮,就为按钮所在的span添加.input-group-btn;如果前后缀是下拉菜单,就为下拉菜单的外围div添加.input-group-btn.

4.所有的<input><select><area>添加.form-control ,<label>不用添加

5,如果要求所有元素内连,为form添加.form-inline;如果创建书评表单的布局,添加form-horizontal.

6,可以给父元素(通常是包含label和input的div),添加has_warning,has_error,has_success来验证状态。

6,input-lg,col-lg-*等可以控制表单相关标签的大小。

四、bootstrap按钮

  按钮相关的类:

1.基本类:

.btn

2.按钮样式类:

.btn-default;.btn-primary;.btn-success;.btn-info;.btn-warning;.btn-danger;.btn-link

3.按钮大小类:

.btn-lg;.btn-sm;.btn-xs;.btn-block;

4.按钮状态类:

.active;.disabled

五、bootstrap图片

  图片样式:

.img-rounded;.img-circle;.img-thumbnail;.img-responsive

六、bootstrap辅助类

1.背景相关类:

.bg-primary;.bg-success;.bg-info;.bg-warning;.bg-danger

2.位置相关类

浮动:.pull-left;.pull-right;清除浮动:.clear-fix

3.显示与隐藏:

.show;.hidden;.sr-only;.sr-only-focusable;.text-hide;

4.显示关闭按钮:.close,通常结合dismiss属性使用

5.显示下拉式功能:.caret,通常结合dropdown-toggle类,data-toggle属性一起使用。

七、bootstrap响应式工具

visible-*-block;visible-*-inline;visible-*-inline-block;其中*可以为xs,sm,md,lg

bootstrap学习之一_bootstrap css的更多相关文章

  1. bootstrap学习之利用CSS属性pointer-events禁用表单控件

    参考链接: CSS3 pointer-events:none应用举例及扩展 首先pointer-events在除去SVG中的应用只有两个值:AUTO | NONE pointer-events:non ...

  2. bootstrap学习(全局CSS样式)(二)

    标题类:.h1到.h6 页面主体 bootstrap将全局font-size设置为14px,line-height设置为1.428,这些属性 直接赋予元素和所有段落元素. 文本对齐类 text-lef ...

  3. bootstrap学习(全局CSS样式)(一)

    布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器.我们提供了两个作词用处的类.注意,由于padding等属性的原因,这两种容器类不能互相嵌套. .container ...

  4. bootstrap学习一

    bootstrap学习 一.css概览: 1.使用HTML5标准,<!DOCTYPE html>. 2.移动设备优先: <meta name="viewport" ...

  5. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  6. Ruby Rails学习中:网站导航,Bootstrap和自定义的CSS,局部视图

    添加一些结构 一.网站导航 1.添加一些结构后的网站布局文件 打开文件:app/views/layouts/application.html.erb 简单介绍一下,添加的代码: 我们从上往下看一下这段 ...

  7. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  8. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  9. Bootstrap学习(3)

    Bootstrap 图片  Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...

随机推荐

  1. windows上在linux客户端上传小文件lrzsz

    yum install lrzsz 即可 rz上传,会打开本地图形化界面直接上传 基于centos系统,其他系统请找对应 的源码包编译 一下

  2. Nvidia Anisotropic Lighting

    http://http.download.nvidia.com/developer/SDK/Individual_Samples/DEMOS/Direct3D9/HLSL_Aniso.zip Anis ...

  3. JS Date函数操作

    1. 补充Format函数 // common functionsstart Date.prototype.Format = function(fmt) { //author: meizz var o ...

  4. 基于LR的Oracle应用性能测试

    最近对一个oracle ERP系统的INV模块进行性能测试,因为之前大部分都是测试web类型的应用,在这方面经验较少,期间也遇到了不少问题,因此有必要作些总结,以备后忘.首先先简单了解下测试对象相关的 ...

  5. 判断i在字符串中出现的次数(2016.1.12P141-1)

    // 方法一,利用substring截取获得出现的次数 String number = "iminigrikejijavabi"; String a = number; int c ...

  6. 理解OAuth 2.0[摘]

    原文地址:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到 ...

  7. IoC容器装配Bean(xml配置方式)(Bean的生命周期)

    1.Spring管理Bean,实例化Bean对象 三种方式 第一种:使用类构造器实例化(默认无参数) package cn.itcast.spring.initbean; /** * 使用构造方法 实 ...

  8. 【ZBar】ios错误ignoring file xxx missing required architecture x86_64 in file

    解决方法: 1.在Project target里"Architectures"设置为:Standard (armv7,armv7s)或者  Standard (armv7,arm6 ...

  9. 变长数组列表ArrayList

    简介:此数据结构定义为一个ArrayList结构体类型,维护了一个内部堆数组.通过realloc函数实现了数组容量自动扩充,每次扩充到原来的2倍. 通过函数指针实现了使用者根据自己的需求按条件按查找目 ...

  10. Python之集合(set)

    一种语言它越便捷,开发效率越高,初学阶段就会越困难.因为语言的设计者帮你造了大量的轮子,你就要掌握如何使用这些轮子.所以,对初学Python来说,记忆的东西很多. 进入正题. 集合就像是抛弃了值(va ...