文件头:

<!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. [Java] 继承中,父类被覆盖的成员变量、方法的可访问性

    在 Java 的继承机制里,在子类内部,可以访问父类被覆盖的变量和方法:在子类外部,可以访问父类的被覆盖变量,但是不能访问父类的被覆盖方法. 父类中被覆盖的方法不能在外部被方法,这是出于封装的考虑. ...

  2. oracle for update和for update nowait

    原文地址:http://www.cnblogs.com/quanweiru/archive/2012/11/09/2762223.html 1.for update 和 for update nowa ...

  3. Highcharts下载与使用_数据报表图

    Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web ...

  4. [Javascript] Introducing Reduce: Common Patterns

    Learn how two common array functions - map() and filter() - are syntactic sugar for reduce operation ...

  5. 《C专家编程》第一天

    1.2 C语言的早期体验 1)C语言的基本数据类型直接与底层硬件相对应.C语言不存在内置的复数类型.C语言一开始不支持浮点类型,直到硬件系统能够直接支持浮点数之后才增加了对它的支持. 2)auto关键 ...

  6. Linux UDP严重丢包问题的解决

    测试系统在Linux上的性能发现丢包率极为严重,发210000条数据,丢包达110000之巨,丢包率超过50%.同等情形下Windows上测试,仅丢几条数据.形势严峻,必须解决.考虑可能是因为协议栈B ...

  7. JPush 极光推送 消息推送 实例

    简介 官网:https://www.jpush.cn/ 极光推送(JPush)是一个端到端的推送服务,使得服务器端消息能够及时地推送到终端用户手机上,让开发者积极地保持与用户的连接,从而提高用户活跃度 ...

  8. Jason 分享吴霁虹教授的产品模型

    产品的出现都是为了解决市场上存在的某一个”疼点“或一系列的”疼点“而出现. 疼点:是一个亟需待解决的问题,对应有相应的市场,会寻找相应的解决方案.比如:用户的小孩——>因为缺钱,所以担心小孩无法 ...

  9. oracle单行函数之日期函数

    在日期上加上或减去一个数字结果仍为日期. 两个日期相减返回日期之间相差的天数. 可以用数字除24来向日期中加上或减去小时. SQL from dual; SYSDATE SYSDATE ------- ...

  10. c#0银行存款计算器

    简介: 为银行存款客户提供一个超级计算器,简单直观操作界面,提供一个银行本意到期金额结算查询程序,方便用户选择存款方式. 功能截图: 实验步骤:利用工具栏建造窗体设计如图: 1.建立2个GroupBo ...