全局CSS

forever1121

浏览: 16707 次
性别:
来自: 齐齐哈尔

最近访客更多访客>>

cuityang

青衫麦子

liliugen

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

bootstrap

bootstrap 布局表格表单

HTML中的所有标题标签，<h1>到<h6>均可使用。另外，还提供了.h1到.h6类，为的是给内联(inline)属性的文本赋予标题的样式。在标题内还可以包含<small>标签或赋予.small类的元素，可以用来标记副标题。

Bootstrap将全局font-size设置14px，line-height设置为1.428。这些属性直接赋予<body>元素和所有段落元素。另外，<p>(段落)元素还被设置了等于1/2行高(10px)的底部外边距(margin)。

通过添加.lead类可以让段落突出显示。

variables.less文件中定义的两个Less变量决定了排版尺寸：@font-size-base和@line-height-base。第一个变量定义了全局font-size基准，第二个变量是line-height基准。自定义这些变量即可改变Bootstrap的默认样式。

高亮字体可以使用<mark>标签。

被删除的文本可以使用<del>标签。

没用的文本可以使用<s>标签。

额外插入的文本可以使用<ins>标签。

带下划线的文本可以使用<u>标签。

对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。。small类可以代替任何<small>元素。

通过增加font-weight值强调一段文本可以使用<strong>标签。

用斜体强调一段文本可以使用<em>标签。

在HTML5中可以放心使用<b>和<i>标签。<b>用于高亮单词或短语，不带有任何着重的意味；而<i>标签主要用于发言、技术词汇等。

通过文本对齐类，可以将文字重新对齐。 .text-left   .text-center   .text-rigjt .text-justify   .text-nowrap

通过.text-lowercase、.text-uppercase和.text-capitalize可以改变大小写。

缩略语：当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语带有title属性，外观表现为带有较浅的虚线框鼠标移至上面时会变成带有问号的指针。
<abbr title="attribute">attr</abbr>
首字母缩略语需添加.initialism类。

换行可以在每行末尾添加<br>标签。

将任何HTML元素包裹在<blockquote>中即可表现为引用样式。对于直接引用，建议使用<p>标签。
<blockquote>
   <p>hello</p>
</blockquote>

可以使用<footer>标签对引用的话进行标注。
<blockquote>
   <p>hello</p>
   <footer>create by <cite title="Source Title">forever</cite></footer>
</blockquote>

可以使用.blockquote-resverse对引用的话进行位置对称。

无序列表可以使用<ul><li>...</li>...</ul>标签实现。

有序列表可以用<ol><li>...</li>...</li>标签实现。

无样式列表可以使用<list-style>标签实现，是直接针对子元素的。

内联类表通过设置.inline-block;并添加少量的内补(padding)，将所有元素放置于同一行。
<ul class="list-inline">
   <li>...</li>
</ul>

带有描述的短语列表使用<dl><dt></dt></dl>标签。

.dl-horizontal可以让<dl>内的短语及其描述排在一行。开始时像<dl>的默认样式堆叠在一起，随着导航条逐渐展开而排列在一起。

内联代码通过<code>标签包裹内联样式的代码片段。

通过<kdb>标签标记用户通过键盘输入的内容。

多行代码可以使用<pre>标签。（尖括号要做转义处理$lt）

通过<var>标签标记变量。

通过<samp>标签来标记程序输出的内容。

为任意<table>标签添加.table类可以为其赋予基本的样式——少量的内补(padding)和水平方向的分割线。
通过添加.table-striped类可以给<body>之内的每一行增加斑马条纹样式。
通过添加.table-bordered类为表格和其中的每个单元格增加边框。
通过添加.table-hover类可以让<tbody>中每一行对鼠标悬停状态做出响应。
通过添加.table-condensed类可以让表格更加紧凑，单元格中的内补(padding)均会减半。
通过这些状态类可以为行或单元格设置颜色。
Class                   描述
.active         鼠标悬停在行或单元格上时所设置的颜色
.success        标识成功或积极的动作
.info           标识普通的提示信息或动作
.warning        标识警告或需要用户注意
.danger         标识危险或潜在的带来负面影响的动作

将.table元素包裹在.table-responsive元素内，即可创建响应式表格。(当屏幕小于768px时显示水平滚动条)。

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100%;。将<label>元素和前面元素提到的控件包裹在.form-group中可以获得最好的排列。
<form role="form">
   <div class="form-group">
       <label for="exampleInputEmail">Email address</label>
       <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
   </div>
   <div class="form-group">
       <label for="exampleInputPassword1">Password<label>
       <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter password">
   </div>
   <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

为<form>元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。只适用于视口(viewport)至少在768px宽度时。一定要为每个输入控件添加label标签，否则屏幕阅读器将无法正确识别。对于内联表单，你可以通过为label设置.sr-only类将其隐藏。

水平排列的表单：通过为表单添加.form-horizontal类，并联合使用Bootstrap预置的栅格类，可以将label标签和空间组水平并排布局。这样将改变.form-group的行为，使其表现为栅格系统中的行(row)，因此无需再额外添加.row了。

输入框：包括大部分表单控件、文本输入域控件，还支持所有HTML5类型的输入空间：text、password、datetime、datetime-local、data、month、time、week、number、email、url、search、tel和color。<input type="">type属性的输入控件才能被赋予正确的样式。

文本域：支持多行文本的表单控件。
<textarea class="form-control" rows="3" />

多选和单选框：设置了disabled属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用改的<label>标签，若也希望将悬停于上方的鼠标设置为禁止点击的样式，请讲.disabled类赋予.radio、radio-inline、.checkbox、.checkbox-inline或<fieldset>.

通过将.checkbox-inline或.radio-inline类应用到一系列的多选框(checkbox)或单选框(radio)控件上，可以使这些控件排列在一行。

下拉列表：使用默认选项或添加multiple属性可以同时显示多个选项。

静态控件：若需要在表单中将一行纯文本和label元素放置在同一行，为<p>元素添加.form-control-static类即可。

输入框焦点：为某些表单控件的默认outline样式移出，然后对:focus状态赋予box-shadow属性。也可为输入框设置disabled属性放置用户输入。为<fieldset>设置disabled属性，可以禁用<fieldset>中共包含的所有控件。
只读输入框：readonly

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

通过.input-lg类似的类可以为空间设置高度，通过.col-lg-*类似的类可以为控件设置宽度。
通过.form-group-lg或.form-group-sm类，为.form-horizontal包裹的label元素和表单控件快速设置尺寸。

用栅格系统中的列(column)包裹输入框或其任何父元素，都可很容易的为其设置宽度。

针对表单控件的“块”级辅助文本。

通过.btn-lg、.btn-sm或.btn-xs可以获得不同尺寸的按钮。通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级元素。

当按钮处于激活状态时，其表现为被按压下去。对于<button>元素，是通过:active状态实现的。对于<a>元素，是通过.active类实现的。还可以对button使用.active。

在Bootstrap V3中，通过为图片添加.img-responsive类可以让图片支持响应式布局(为图片设置了max-width:100%;和height:auto;)。

为图片设置形状：
方形img-rounded   圆形img-circle   带边框的方形img-thumbnail

分享到：