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"> & ...
随机推荐
- RequireJs 依赖管理使用
What? 声明不同js文件之间的依赖,可以按需.并行.延时载入js库,可以让我们的代码以模块化的方式组织. When? 对于中大型项目,为了团队成员更好得发挥协同力,各自管理各自的JS代码,按需调用 ...
- Entity Framework多对多关联映射的实现
Entity Framework是微软官方提供的一个ORM解决方案,它有纯正的血统,比NHibernate更容易使用并且与现有其它官方框架配合更加密切. 时代不断的在发展变化,记得10年前还是ADO( ...
- WPF MVVM 用户控件完成分页
项目中经常会有分页查询的情况,在WPF中我们可以通过用户控件完成分页 一下为分页控件的页面代码, <UserControl x:Class="Foundation.UCtrl.Next ...
- 原创：Javascript Websocket客户端封装
调试中,马马虎虎能用var LeesWebSocket = function (options) { this.defaults = { host: "127.0.0.1", po ...
- SQL函数说明大全 （转）
一旦成功地从表中检索出数据,就需要进一步操纵这些数据,以获得有用或有意义的结果.这些要求包括:执行计算与数学运算.转换数据.解析数值.组合值和聚合一个范围内的值等. 下表给出了T-SQL函数的类别和描 ...
- javascript高级编程笔记02(基本概念)
ParseInt()函数: 由于Number函数在转换字符串时比较复杂而且不合理,我们常常转换字符串都用parseInt函数, Parseint函数规则: 忽略字符串前面的空格,直到找到第一个非空格字 ...
- <四> SQL存储过程
存储过程的定义: create procedure procedurename @param1 nvarchar(30) as select * from tablename where name = ...
- DB天气app冲刺第四天
今天卡壳了 做得很慢.. 明天继续 换一种思路试一下吧..
- 关于 js 2个数组取差集怎么取
关于 js 2个数组取差集怎么取? 例如求var arr1 = [1]; var arr2 = [1,2];的差集方法一: Array.prototype.diff = function(a) { r ...
- js对象序列化JSON.stringify()与反序列化JSON.parse()
草稿: parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age" ...