bootstrap简单的过一遍
注:.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简单的过一遍的更多相关文章
- 基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
- Bootstrap简单入门
Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="U ...
- Bootstrap简单Demo(2015年05月-18日)
Bootstrap的简单使用 1.Bootstrap是什么? 这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML.CSS和JS框架,用于开发响应式布局.移动设备优先的WEB ...
- bootstrap简单图文环绕效果
一. 下载bootstrap-3.3.7 二. 在html页面引入css,js; eg: <link src="bootstrap-3.3.7-dist/css/b ...
- Bootstrap简单HelloWorld入门教程
这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点.看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用boots ...
- mvc area区域和异步表单,bootstrap简单实例
码农最怕眼高手低 今天来练习mvc Area技术和bootstrap以及异步表单的C#代码实现. 1.area区域架构对于建立复杂业务逻辑很有帮助,由 AreaRegistration.Regist ...
- 【Bootstrap简单用法】
一.下载及使用 参考网站:http://www.bootcss.com/ 1.使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) <!-- 最新版本的 ...
- bootstrap 简单练习(后续把其它页面也进行练习)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- bootstrap简单使用实例
表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...
随机推荐
- 配置云服务器 FTP 服务
自己配置的环境: OS: 阿里云 CentOS 6.5 >>Begin: 1. 登录到阿里云服务器(如何登录阿里云服务器), 在root权限下, 通过如下命令安装 vsftp [root@ ...
- php ci 2.0框架 ORM
很早知道ci出了2.0版本了.这几天正好有项目要用ci开发 虽然项目不大.不过也从开发项目的过程中熟悉了CI框架 因为是个电商项目 本来想用个YII2 的. 封装的虽然厉害不过功能强大 因为另个兄弟坚 ...
- 项目中应用eventbus解决的问题
在项目开发过程中,往往有些功能表面看起来简单,但实际开发的结果非常复杂,仔细分析下原因发现很多都是因为附加了许多的额外功能. 真的简单吗? 比如我们对一个电商平台的商品数据做修改的功能来讲,其实非常简 ...
- Linux更改主机名--适用于Centos
1.显示主机名: [root@bogon:~]# hostnamezhh64 2.临时修改主机名: [root@bogon:~]# hostname zzofs[root@bogon:~]# host ...
- oracle RAC的VIP和scan
我们都知道Oracle RAC中每个节点都有一个虚拟IP,简称VIP,与公网IP在同一个网段. 没有VIP时,Oracle客户端是靠"TCP/IP协议栈超时"来判断服务器故障.而T ...
- DBHelper (支持事务与数据库变更)
1 概述 更新内容:添加 "支持数据分页" 这个数据库操作类的主要特色有 1> 事务操作更加的方便 2> 变更数据库更加的容易 3> 支持数据分 ...
- TaggingJS – 可以灵活定制的 jQuery 标签系统插件
TaggingJS 是一款 jQuery 插件,用来创建高度可定制的前端标签系统.这款插件不到3KB ,支持主流浏览器.有几种方法来定制 TaggingJS 的默认行为:一是使用 custom_op ...
- Hello.js – Web 服务授权的 JavaScript SDK
Hello.js 是一个客户端的 Javascript SDK,用于实现 OAuth2 认证(或者基于 OAuth 代理实现的 OAuth1)的 Web 服务和查询 REST API. HelloJS ...
- css居中完全指南(翻译)
最近参加了百度的前端技术学院,任务4是要求一个元素在父元素中水平和垂直居中,提供的一篇文章对各种情况都进行了分析,很不错,英文也不是那么难懂,毕竟代码还是主体,翻译过来分享出来,翻译内容带有自己的理解 ...
- HTML标签的嵌套规则
我在平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,后来发现有些标签嵌套却是错误的.通过网上找资料,了解了html标签的嵌套规则. 一.HTML 标签包括 块级 ...