bootstrap初识

Bootstrap

Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。

<head>之中添加viewport元数据标签。添加user-scalable=no可以禁用其缩放(zooming)功能。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用了Normalize

用container包裹元素使其居中。

栅格系统布局:

表格

为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补(padding)和水平方向的分隔线。

利用.table-bordered为表格和其中的每个单元格增加边框。

利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。

利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。

通过状态class可以为行货单元格设置颜色:

将任何.table包裹在.table-responsive中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。

表单

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control<input><textarea><select>元素都将被默认设置为 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。

为左对齐和inline-block级别的控件设置.form-inline,可以将其排布的更紧凑。

通过为表单添加.form-horizontal,并使用Bootstrap预置的栅格class可以将label和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再使用.row了。

被支持的控件

大部分表单控件、文本输入域控件。包括HTML5支持的所有类型:textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor

在水平布局的表单中,如果需要将一行纯文本放置于label的同一行,为<p>元素添加.form-control-static即可。

输入焦点

我们移除了某些表单控件的默认outline样式,并对其:focus状态赋予了box-shadow样式。

被禁用的输入框

为输入框设置disabled属性可以防止用户输入,并能改变一点外观,使其更直观。

被禁用的fieldset

<fieldset>设置disabled属性可以禁用<fieldset>中包含的所有控件。

校验状态

Bootstrap对表单控件的校验状态,如error、warning和success状态,都定义了样式。使用时,添加.has-warning.has-error.has-success到这些控件的父元素即可。任何包含在此元素之内的.control-label.form-control.help-block都将接受这些校验状态的样式。

原文地址:https://www.cnblogs.com/lurending0417/p/7471713.html