注:.xxxx 表示类(class=xxxx)

<h1>到<h6>均可使用。另外还提供了.h1到.h6的class

.lead可以让段落突出显示

<small>  其内的文本将被设置为父容器字体大小的85%

<strong> 着重

<em> 斜体

对齐class:text-left ,text-center,text-right

强调class: text-muted
        text-primary
        text-success
        text-info
        text-warning
        text-danger

<abbr>:基本缩略语,.initialism 可以将其font-size设置的更小些

<blockquote>:任何HTML裹在<blockquote>之中即可表现为引用
             .pull-right 右对齐 .pull-left 左

<cite>:

<ol>或<ul>: .list-unstyled 移除了默认的list-style样式和左侧外边距的一组元素

<dl><dt><dd>: .dl-horizontal可以让<dl>内短语及其描述排在一行

<code>:在正文中通过<code>标签包裹内联样式的代码片段,为了正确的展示代码,注意将尖括号做转义处理。

<pre>:多行代码可以使用<pre>标签。为了正确的展示代码,注意将尖括号做转义处理。

表格相关########################################################

<table>:.table-striped 增加斑马条纹样式
         .table-bordered为表格和其中的每个单元格增加边框
         .table-hover可以让<tbody>中的每一行响应鼠标悬停状态
     .table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。

<thead>
<tbody>
<tr>
<td>
<th>
<caption>:表格用途的描述和摘要

为行或单元格设置颜色
.active  鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.warning 标识警告或需要用户注意
.danger  标识危险或潜在的带来负面影响的动作

将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。

表单相关#################################################################
.form-control:所有设置了.form-control的<input>、<textarea>和<select>元素都将被默认设置为width: 100%;。
.form-group:将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。
.form-inline:元素紧凑
.sr-only:隐藏label
.form-horizontal
.checkbox-inline
.radio-inline
.form-control-static:将一行纯文本放置于label的同一行,为<p>元素添加.form-control-static即可

disabled: 被禁用的输入框

校验状态: .has-warning、.has-error或.has-success

通过.input-lg之类的class可以为控件设置高度,通过.col-lg-*之类的class可以为控件设置宽度。

.help-block 块级帮助文本

按钮相关#############################################################

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">链接</button>

尺寸 .btn-lg、.btn-sm、.btn-xs

.btn-block

活动状态 active

禁用状态 disabled

工具class##############################################################

bootstrap简单的过一遍的更多相关文章

  1. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  2. Bootstrap简单入门

    Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="U ...

  3. Bootstrap简单Demo(2015年05月-18日)

    Bootstrap的简单使用 1.Bootstrap是什么? 这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML.CSS和JS框架,用于开发响应式布局.移动设备优先的WEB ...

  4. bootstrap简单图文环绕效果

    一.      下载bootstrap-3.3.7 二.      在html页面引入css,js; eg: <link src="bootstrap-3.3.7-dist/css/b ...

  5. Bootstrap简单HelloWorld入门教程

    这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点.看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用boots ...

  6. mvc area区域和异步表单,bootstrap简单实例

    码农最怕眼高手低 今天来练习mvc Area技术和bootstrap以及异步表单的C#代码实现. 1.area区域架构对于建立复杂业务逻辑很有帮助,由  AreaRegistration.Regist ...

  7. 【Bootstrap简单用法】

    一.下载及使用 参考网站:http://www.bootcss.com/ 1.使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) <!-- 最新版本的 ...

  8. bootstrap 简单练习(后续把其它页面也进行练习)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. bootstrap简单使用实例

    表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...

随机推荐

  1. GIT 查看/修改用户名和邮箱地址

    用户名和邮箱地址的作用用户名和邮箱地址是本地git客户端的一个变量,不随git库而改变.每次commit都会用用户名和邮箱纪录.github的contributions统计就是按邮箱来统计的.查看用户 ...

  2. 为什么URL中的中文需要Encode两次?

    在URL中传参的时候常常需要传入中文,这个时候就需要对中文参数进行编码,即URLEncode.但是,常常是Encode两次,而不是一次,为什么呢? 首先要知道,tomcat会自动解码一次: 这样的话, ...

  3. Ajax基本概念和原理

    什么是Ajax Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. Ajax的全称是Asynchronous JavaScript and XML,即异步JavaScript+X ...

  4. 从零开始,做一个NodeJS博客(四):服务器渲染页面与Pjax

    标签: NodeJS 0 一个星期没更新了 = = 一直在忙着重构代码,以及解决重构后出现的各种bug 现在CSS也有一点了,是时候把遇到的各种坑盘点一下了 1 听歌排行 API 修复与重构 1.1 ...

  5. JEPF 3.1.2 发布,我们的软件机床(软件快速开发平台)

    JEPF新一代软件快速开发平台(Java Elephant Platform)是一款优秀的平台产品,它本着灵活.快捷开发.高性能.高协作性.高稳定性.高可用性.人性化的操作体验为设计宗旨历经2年研发成 ...

  6. Android使用Fragment来实现TabHost的功能(解决切换Fragment状态不保存)以及各个Fragment之间的通信

    以下内容为原创,转载请注明:http://www.cnblogs.com/tiantianbyconan/p/3360938.html 如新浪微博下面的标签切换功能,我以前也写过一篇博文(http:/ ...

  7. android自定义activity

    今天公司有个需要需要自动弹出界面,而dialog又不符合要求,所以自定义的一个activity的样式 首先在androidmainfest.xml上注册你的activity <activity ...

  8. iOS开源项目MobileProject功能点介绍

    一:MobileProject简介 MobileProject项目是一个以MVC模式搭建的开源功能集合,基于Objective-C上面进行编写,意在解决新项目对于常见功能模块的重复开发,MobileP ...

  9. iOS如何获取网络图片(二)

    ios如何获取图片(二)无沙盒下 解决问题 *解决问题1:tableView滑动卡顿,图片延时加载 解决方法:添加异步请求,在子线程里请求网络,在主线程刷新UI *解决问题2:反复请求网络图片,增加用 ...

  10. iOS开发之集成百度地图踩过的那些坑(基于 Xcode7.0/iOS9.2)

    本篇分4步讲述如何在项目中集成百度地图: 第一步:创建项目 第二步:利用 cocoaPod 导入百度地图的 SDK(pod 'BaiduMapKit' #百度地图SDK) 第三步:在 pch 文件中导 ...