全局css样式

来源：互联网发布：黑桐谷歌淘宝店编辑：程序博客网时间：2024/06/06 04:03

1、移动设备优先

1.1、head部分的设置

ie使用最新的渲染引擎

<meta http-equiv="X-UA-Compatible" content="IE=edge">

viewport元数据标签

<meta name="viewport" content="width=device-width,initinal-scale=1, maximum-scale=1, user-scalable=no ">

2、栅格化系统

2.1、栅格参数

这里写图片描述

2.2、清浮动 - .clearfix

<div class="row">  <div class="col-xs-6 col-sm-3">当此处内容很多很多很多很多时，会把这列的高度撑的很高，row下面的col都是浮动布局，这样就会使第三个列出现问题，在分辨率小时才出现。因为大分辨率下，有足够的宽，让所有的列水平排列</div>  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>  <!-- Add the extra clearfix for only the required viewport，你可以试试不要visible-xs-block -->  <div class="clearfix visible-xs-block"></div>  <div class="col-xs-6 col-sm-3">如果没有上面一行的设置，在小分辨率下，我会出现在第一列的后面，因为它太高了。</div>  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div></div>

2.3、列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

当offset-*大于12时，会向下移动

2.4、列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。push向后移动，pull向前移动。

当push大于12时，依然在一行，这不同于列偏移offset

2.5、嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row">  <div class="col-sm-9">    Level 1: .col-sm-9    <div class="row">      <div class="col-xs-8 col-sm-6">        Level 2: .col-xs-8 .col-sm-6      </div>      <div class="col-xs-4 col-sm-6">        Level 2: .col-xs-4 .col-sm-6      </div>    </div>  </div></div>

3、排版

3.1、标题

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

3.2、页面主体

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

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

3.3、内联文本元素

1.高亮显示 <mark>

<p>对此，我很<mark>抱歉</mark></p>

对此，我很抱歉

2.被删除的文本<del>

<del>对此，我很抱歉</del>

~~对此，我很抱歉~~

3.无用文本<s>，表现形式和del差不多

<p>对此，我很<s>抱歉</s></p>

对此，我很抱歉

4.额外插入的文本使用 <ins> 标签。
5.为文本添加下划线，使用 <u> 标签。
6.小号文本
对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。还可以为行内元素赋予 .small 类以代替任何 <small> 元素。
7.着重<strong>标签
8.斜体<em>

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

3.4、对齐

<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p>

3.5、改变大小写

<p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p>

3.6、缩略语

<abbr title="attribute">attr</abbr>

为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

3.7、地址
在每行结尾添加 <br> 可以保留需要的样式。

<address>  <strong>Twitter, Inc.</strong><br>  795 Folsom Ave, Suite 600<br>  San Francisco, CA 94107<br>  <abbr title="Phone">P:</abbr> (123) 456-7890</address>

3.8、引用 blockquote
1.默认样式的引用

<blockquote>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>

2.多种引用样式
添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

<blockquote>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>

3.右对齐的效果

<blockquote class="blockquote-reverse">  ...</blockquote>

3.9、列表
1.无序列表 ul
2.有序列表 ol
3.无样式列表，仅针对子级的的li，不包括孙子

<ul class="list-unstyled">  <li>...</li></ul>

4、内联列表

<ul class="list-inline">  <li>...</li></ul>

5、自定义列表dl dt dd
6、水平排列的描述
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">  <dt>...</dt>  <dd>...</dd></dl>

4、代码

单个标签用 code 标签
多行标签用 pre 标签
用户通过键盘输入用 kbd 标签
变量用 var 标签

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

5、表格

5.1、基本表格
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线
5.2、条纹状表格

.table-striped

5.3、带边框的表格

.table-bordered

5.4、鼠标悬停

 .table-hover

5.5、紧缩表格

.table-condensed

5.6、状态类
这里写图片描述

5.7、响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

6、表单

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

<form>  <div class="form-group">    <label for="exampleInputEmail1">Email address</label>    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">  </div>  <div class="form-group">    <label for="exampleInputPassword1">Password</label>    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="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>  <div class="checkbox">    <label>      <input type="checkbox"> Check me out    </label>  </div>  <button type="submit" class="btn btn-default">Submit</button></form>

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

6.2、内联表单
为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

<form class="form-inline">  <div class="form-group">    <label for="exampleInputName2">Name</label>    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">  </div>  <div class="form-group">    <label for="exampleInputEmail2">Email</label>    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">  </div>  <button type="submit" class="btn btn-default">Send invitation</button></form>

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

<form class="form-horizontal">  <div class="form-group">    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>    <div class="col-sm-10">      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">    </div>  </div>  <div class="form-group">    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>    <div class="col-sm-10">      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <div class="checkbox">        <label>          <input type="checkbox"> Remember me        </label>      </div>    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <button type="submit" class="btn btn-default">Sign in</button>    </div>  </div></form>

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

6.5、添加额外的图标
只需设置相应的 .has-feedback 类并添加正确的图标即可，反馈图标（feedback icon）只能使用在文本输入框 <input class="form-control"> 元素上。
这里写图片描述

实现这样的效果，首先父元素要相对定位（.has-feedback），小图标绝对定位，图标并设置right值(.form-control-feedback)。

<div class="form-group has-success has-feedback">  <label class="control-label" for="inputSuccess2">Input with success</label>  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>  <span id="inputSuccess2Status" class="sr-only">(success)</span></div>

6.6、控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

6.7、针对表单控件的“块（block）”级辅助文本。提示语

<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

7、按钮

7.1、可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。

如果 <a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果

7.2、尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

7.3、激活状态和禁用状态
.active 和 .disabled

8、图片

8.1、响应式图片
通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

8.2、图片形状

<img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail">

9、辅助类

9.1、情景颜色
文本

<p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...</p><p class="text-danger">...</p>

背景

<p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p>

9.2、关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

9.3、三角符号

<span class="caret"></span>

9.4、快速浮动
.pull-left 和 .pull-right

不能用于导航条组件中
排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。

9.5、让内容块居中

<div class="center-block">...</div>

9.6、清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）

9.7、显示隐藏
.show
.hidden 或 .sr-only

10、响应式工具

这里写图片描述

0 0