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

1.h

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

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

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

<h1>标题1</h1>

<div class="h1">标题1</div>

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：两端对齐

  • 表单

  • 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">
  • <lable>
  • <input type="checkbox" value="">
  • </lable>
  • </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

bootstrap总结的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. Python模块学习笔记

    1.作用域 私有private:用'_x'或'__xx'表示,如,_a,__ab; 公有public: 如 a,b; 特殊变量,可被直接引用,如:__author__,__name__,命名变量时一般 ...

  2. mac 安装mvn 失败

    安装过程遇到2个问题 1.java版本不对 2.Error: JAVA_HOME is not defined correctly. We cannot execute $/usr/libexec/j ...

  3. NSTimer “定时器”

    •NSTimer叫做“定时器”,它的作用如下 Ø在指定的时间执行指定的任务 Ø每隔一段时间执行指定的任务 Ø •调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTime ...

  4. iOS系统网络抓包方法

    转到自己的博客收藏. 1. 网络共享 + 可视化抓包工具 基本原理 原理比较简单,ios设备通过代理方式共享连接mac电脑的无线网卡,使用抓包工具抓包,然后进行分析(我们推荐使用Wireshark,在 ...

  5. 掌握Redmine

    一个带有建议.技巧和最佳实践的全面指导和易懂易学的结构. 掌握Redmine 版权©2013 Packt出版 前言(略) 1.熟悉Redmin 我们尝试去做一个新的网站应用程序的时候,回去询问一些了解 ...

  6. 简单研究Android View绘制三 布局过程

    2015-07-28 17:29:19 这一篇主要看看布局过程 一.布局过程肯定要不可避免的涉及到layout()和onLayout()方法,这两个方法都是定义在View.java中,源码如下: /* ...

  7. 设计模式（3）--抽象工厂模式（Absrtact Factory Pattern）

    定义 抽象工厂模式的实质就是提供接口来创建一系列相关或独立的对象而不指定这些对象的具体类. 理解 在软件系统中,经常面临着"一系列相互依赖的对象"的创建工作:同时由于需求的变化,往 ...

  8. SharpDevelop学习笔记（5）—— AddIns系统详解

    在所有的插件被加载到指定的扩展点后,插件树就被创建完毕了, 但是,我们知道,插件树创建后,每个插件在插件树的位置在就固定的,但是,如果某些情况下,我们希望一些插件不可使用或应该隐藏起来, 或者说有的插 ...

  9. powershell读写磁盘变量（对象序列化）

    ---[第一章,开篇引子]--- 很久很久以前,我在网上闲逛,看到一头powershell菜鸟,写了一篇感慨道“挖哈哈,我学会powershell啦,我以前很笨,各种不懂,还想把变量保存起来.” 实际 ...

  10. Httpclient请求数据(post)

    public static String loginCheck_POST_HttpClient(String name,String pass,String url){ String result = ...