bootstrap基本标签总结[转]
文件头：
bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。
1.h
<h>标签和普通使用方法一样。
定义了.h1~.h6六个类名，样式和标题样式一样。
副标题用<small>标签指出，必须包含在h标签内。
<h1>Bootstrap标题一<small>我是副标题</small></h1>
2.p
定义<body>的字体库、字号、行高、颜色，<p>标签继承这些设置，单独设置margin-bottom为10px，使用方法同普通方法。
强调内容
增大：.lead;
加粗：<strong>; <b>（设置font-weight: bold）
斜体：<em>;<i> （设置font-style: italic）
不变：<cite>
变小：<small>,.small
强调类（颜色）
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（##a94442）
文本对齐
（设置text-align：center、left、right、justify）
☑ .text-left：左对齐
☑ .text-center：居中对齐
☑ .text-right：右对齐
☑ .text-justify：两端对齐
3.列表（ul ol dl）
Bootstrap对于列表，只是在margin上做了一些调整
margin-top: 0;
margin-bottom: 10px;
去除项目符号
.list-unstyled
（padding-left: 0;
list-style: none;）
内联列表，制作水平导航
.list-inline
代码
<code> <pre> <kbd>
<pre class=“.pre-scrollable”> 设置最大代码区域
4.表格
千万注意，你的<table>元素中一定不能缺少类名table
☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格
<tr>的不同行颜色
5.表单
<form role=”form”>
默认垂直显示
用<div class=“form-group”>包围控件及其标签
对input select textarea设置.form-control
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
水平风格表单：标签在左，控件在右
1、在<form>元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。（网格布局会在以后的章节中详细讲解）
内联表单 ：控件一行显示
在<form>元素中添加类名“form-inline”
表单控件
select：<select multiple class="form-control"> 选择多个
textarea： <textarea class="form-control" rows="3"></textarea>
radio，checkbox：div包着label包着input
radio，checkbox：水平排列
div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input
禁用控件：在控件上添加disabled属性
<input class="input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
验证状态：form-group容器添加has-success等类;若想label同步变色需要在label上加.control-label;显示icon需要在form-group加.has-feedback，最后加一个span存放icon
表单提示信息：
在form-group容器后加一个span，添加类名.help-block
button：四种方式，bootstrap用button实现，建议用button和a标签来制作按钮
<input type="button">
<input type="reset">
<input type="submit">
<button></button>
button样式
.btn
.btn-default
大小：
.btn-lg
.btn-sm
.btn-xs
块状按钮：按钮充满整个容器，没有padding和margin .btn-block
禁用按钮：添加类.disabled 或者添加属性disabled=“disabled”
网格系统
分为12列，可以嵌套
.col-md-offset-4 .col-md-4 .col-md-push-* .col-md-pull-*
<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8"> <div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
</div>
</div>
缩略图
还可以添加标题、说明、按钮，添加caption容器。
警示框
1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；
2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；
3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；
4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。
进度条
提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。
媒体对象
列表组
在列表项的任何区域都可点击
.list-group-item中可以包括：.list-group-text, .list-group-heading
.list-group-item可以设置：.active .disabled .list-group-item-success
面板
弹出框
modal
1.button触发
2.绑定javascript事件
$(function(){
$(".btn").click(function(){
$("#mymodal").modal();
});
});
bootstrap基本标签总结[转]的更多相关文章
- bootstrap基本标签总结2
[布局]bootstrap基本标签总结2 缩略图 <div class="container"> <div class="row"> ...
- bootstrap 下 标签页跳转总结
最近遇到一个问题,是关于bootstrap中的标签页实现上的一些功能实现,现总结一下. 问题描述:点击其他标签页后,如何在点击搜索按钮后自动跳转到第一个标签页.如下图 通过对bootstrap框架里的 ...
- [布局] bootstrap基本标签总结
文件头: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...
- [布局]bootstrap基本标签总结2
缩略图 <div class="container"> <div class="row"> <div class="co ...
- bootstrap 混合标签
<html lang="zh_cn"> <head> <meta charset="utf-8"> <meta htt ...
- bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中，同时有 col-xs , col-sm , col-md , col-lg的理解
摘要: bootstrap栅栏系统css中的col-xs-*.col-sm-*.col-md-* 的意义: .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 ( ...
- BootStrap tabs标签 使用fade效果首次加载页面不能显示内容
<div class="tab-pane active fade" id="home"> <div class="alert ale ...
- bootstrap -- 一个标签中，同时有 col-xs , col-sm , col-md , col-lg
.col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显 ...
- bootstrap tab标签页
<ul id="myTab" class="nav nav-tabs"> <li class="active"> & ...
随机推荐
- jQuery Mobile里xxx怎么用呀？(控件篇)
jQuery Mobile里都有什么控件? http://api.jquerymobile.com/category/widgets/ jQuery Mobile里slider控件的change事件怎 ...
- C#对XML、JSON等格式的解析
C#对XML.JSON等格式的解析 一.C#对XML格式数据的解析 1.用XMLDocument来解析 XmlDocument xmlDocument = new XmlDocument(); xml ...
- Websocket协议之握手连接
Websocket协议是为了解决web即时应用中服务器与客户端浏览器全双工通信的问题而设计的,是完全意义上的Web应用端的双向通信技术,可以取代之前使用半双工HTTP协议而模拟全双工通信,同时克服了带 ...
- PHPCMS如何实现后台访问限制？
修改phpcms 后台管理路径,可以有效的防止因为程序漏洞,或者是服务器安全问题所带来的 phpcms系统管理权限被黑客获取 文件路径:/caches/config/system.php 修改:'ad ...
- numpy+scipy+matlotlib+scikit-learn的安装及问题解决
NumPy(Numeric Python)系统是Python的一种开源的数值计算扩展,一个用python实现的科学计算包.它提供了许多高级的数值编程工具,如:矩阵数据类型.矢量处理,以及精密的运算库. ...
- Linux操作命令（一）
ls 命令 ls 命令是 linux 下最常用的命令,ls 命令就是 list 的缩写. ls 用来打印出当前目录的清单.如果 ls 指定其他目录,那么就会显示指定目录里的文件及文件夹清单. 通过 l ...
- 关于Weblogic连接池的TestConnectionOnReserve
由于最近某客户的系统性能比较差,所以今天又上去跟踪了一下.看了一下Default Data Cache,发现已经从10G调整到了20G,所以可以确定应该是客户的管理员已经将双机从低配置的机器切 ...
- cocos2d-js Mac下的JSB绑定步骤
cocos2d-js由于采用js语言,使得做一些native的功能比较受限,例如文件和目录操作.socket操作等.逼不得已,这时我们就不得不做jsbinding了.. 官方提供的jsbinding方 ...
- button的相关属性
设置自定义按钮的文字大小 [submit.titleLabel setFont:[UIFont boldSystemFontOfSize:16]]; 设置按钮选中状态的颜色 [btn setTintC ...
- uva 165 Stamps
题意: 现有k种邮票面额, 一封信上最多贴h张邮票. 求能贴出的最大连续区间,即[1, max_value]这个区间内的所有面额都能贴出来. 并输出k种面额, h + k <= 9. 思路: 这 ...