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"> & ...
随机推荐
- PH获取当前url路径及服务器路径汇总 (url 获取当前路径 服务器路径)
以下是整理的一些, php中获取路径的小知识, 希望对你有所帮助! 1,$_SERVER["QUERY_STRING"] 说明:查询(query)的字符串 2,$_SERVER[& ...
- PHP字符
匹配查找 strstr strpos 通常用在表单验证里面可以用到 substr 正值表达式匹配 preg_mathc(), preg)mathc_all() , preg_grep() 编码格式的转 ...
- mysql索引使用笔记
1.使用explain语句查看性能mysql> explain select product_id from orders where order_id in (123, 312, 223, 1 ...
- Oracle索引扫描
Oracle索引扫描:先通过index查找到索引的值,并根据索引的值对应的rowid值(对于非唯一索引可能返回多个rowid值)直接从表中得到具体的数据.一个rowid唯一的表示一行数据,该行对应的数 ...
- linux系统管理
系统 # uname -a # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue # 查看操作系统版本# cat /proc/cpuinfo ...
- Sqlmap下载安装与基础命令使用
本文介绍一下Sqlmap的安装跟配置环境变量. 顺便附上一些常用的命令 SQLMAP-64位.Python 下载链接:http://pan.baidu.com/s/1c0D82fm 密码:d7ec P ...
- 粗略阅读《Agile Software Development》后的感想
大致配合翻译和词典阅读了一下这篇文章之后,我另外还查阅了维基百科.百度百科和MBA智库百科还有一些网络上的文章.对敏捷开发有了一个大致上的浅显的认识. 敏捷建模(Agile Modeling,AM)的 ...
- OpenVPN下载、安装、配置及使用详解
OpenVPN下载.安装.配置及使用详解 OpenVPN简介 OpenVPN是一个用于创建虚拟专用网络(Virtual Private Network)加密通道的免费开源软件.使用OpenVPN可 ...
- POJ 1236 Network of Schools[连通分量]
题目链接:http://poj.org/problem?id=1236题目大意:给出N台电脑,电脑间单向连通传送文件问题1.网络中最少放几个文件保证所有电脑都能接受到文件问题2.最少向网络中加几条线保 ...
- memcached源代码包下载
先下载libevent https://github.com/downloads/libevent/libevent/libevent-2.0.18-stable.tar.gz 再下载memcache ...