文件头：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>基础表格</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

bootstrap在reset.css文件中设置margin为0，因此其他的标签需要重新设计margin。

1.h

<h>标签和普通使用方法一样。

定义了.h1~.h6六个类名，样式和标题样式一样。

副标题用<small>标签指出，必须包含在h标签内。

<h1>Bootstrap标题一</h1>

<div class="h1">Bootstrap标题一</div>
<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：响应式表格

<table class="table">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>
 
<tr>的不同行颜色
<tbody>

    <tr class="active">

      <td>.active</td>

      <td>表示当前活动的信息</td>

    </tr>

    <tr class="success">

      <td>.success</td>

      <td>表示成功或者正确的行为</td>

    </tr>

    <tr class="info">

      <td >.info</td>

      <td>表示中立的信息或行为</td>

    </tr>

    <tr class="warning">

      <td>.warning</td>

      <td>表示警告，需要特别注意</td>

    </tr>

    <tr class="danger">

      <td>.danger</td>

      <td>表示危险或者可能是错误的行为</td>

    </tr>

  </tbody>
 
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

<div class="checkbox">

    <label>

      <input type="checkbox" value="">

      记住密码

    </label>

  </div>

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>

[布局] bootstrap基本标签总结的更多相关文章

  1. [布局]bootstrap基本标签总结2

    缩略图 <div class="container"> <div class="row"> <div class="co ...

  2. bootstrap基本标签总结2

    [布局]bootstrap基本标签总结2   缩略图 <div class="container"> <div class="row"> ...

  3. Django 的母板及布局(Bootstrap)

    title: Django 的母板及布局(Bootstrap) tags: Django --- Django 的母板及布局(Bootstrap) Django 的母板是作为公共的部分,其他的页面都能 ...

  4. Android 性能优化 四 布局优化merge标签的使用

    小白:之前分享了ViewStub标签的使用,Android还有其他优化布局的方式吗? 小黑:<merge />标签用于减少View树的层次来优化Android的布局.先来用个例子演示一下: ...

  5. 布局技巧2：合并布局（merge标签）

    我们已经有文章向你描述如何使用<include />标签来重用和共享你的布局代码.这篇文章将向你阐述<merge />标签的使用以及如何与<include />标签 ...

  6. bootstrap基本标签总结[转]

    文件头: DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  7. 响应式布局 Bootstrap

    github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...

  8. 响应式布局 Bootstrap（01）

    1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...

  9. bootstrap 下 标签页跳转总结

    最近遇到一个问题,是关于bootstrap中的标签页实现上的一些功能实现,现总结一下. 问题描述:点击其他标签页后,如何在点击搜索按钮后自动跳转到第一个标签页.如下图 通过对bootstrap框架里的 ...

随机推荐

  1. [ 转]国内有时抽风，无法更新adt的解决方案

    http://www.xidige.com/other/354 最近无意中发现mirrors.neusoft.edu.cn有android的目录,进去还能看到xml文件,所以网络搜索了一下,发现还有另 ...

  2. WAD Forwarder版USB Loader的安装和运行

    背景知识 我使用Wad Manager来安装WAD版软件,所以需要先在Wii上面把Wad Manager准备好.详情可以参考我写的另外一篇文章<Wad Manager的下载和运行>(链接: ...

  3. JDK 和JRE的区别

    JRE:Java Runtime Environment/Java运行时环境目标用户:只需要运行Java程序的用户JRE包含了:Deployment,User Interface Toolkits,I ...

  4. ORACLE 索引概述

    索引是数据库中一种可选的数据结构,她通常与表或簇相关.用户可以在表的一列或数列上建立索引,以提高在此表上执行 SQL 语句的性能.就像本文档的索引可以帮助读者快速定位所需信息一样,Oracle 的索引 ...

  5. php开发中将远程图片本地化的方法

    检查文本内容中的远程图片,下载远程图片到本地的方法示例. /** * 下载远程图片到本地 * * @param string $txt 用户输入的文字,可能包含有图片的url * @param str ...

  6. tomcat配置文件server.xml详解 转载http://blog.csdn.net/yuanxuegui2008/article/details/6056754

    元素名 属性 解释 server port 指定一个端口,这个端口负责监听关闭tomcat 的请求 shutdown 指定向端口发送的命令字符串 service name 指定service 的名字 ...

  7. ajax_get方式

    test_ajax_get.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  8. 转载-- C/S 与 B/S 区别

    C/S 与 B/S 区别   C/S结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可 ...

  9. javascript 中寻找性能瓶颈

    1.如果一个段代码很耗时的话你可以注释掉一部分你认为是很耗时的,或者干脆全部注释掉,然后再一点一点的解开. 2.js优化中最主要的还是对dom操作的优化,单纯的js执行时间是很短的,而js和dom之间 ...

  10. adb服务启动失败处理命令

    执行以下命令: D:\android-sdks\platform-tools>adb kill-server --停止adb服务 D:\android-sdks\platform-tools&g ...