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

posted on 2015-06-15 13:25  杨大大  阅读(246)  评论(0编辑  收藏  举报