HTML

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>全局样式</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

      <!-- Main jumbotron for a primary marketing message or call to action -->

      <div class="jumbotron">

        <h1>Hello, world!</h1>

        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>

        <p><a href="#" >Learn more »</a></p>

      </div>

</body>

</html>

CSS

html {

  font-family: sans-serif;

  -webkit-text-size-adjust: 100%;

      -ms-text-size-adjust: 100%;

}

body {

  margin:;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

nav,

section,

summary {

  display: block;

}

audio,

canvas,

progress,

video {

  display: inline-block;

  vertical-align: baseline;

}

audio:not([controls]) {

  display: none;

  height:;

}

[hidden],

template {

  display: none;

}

a {

  background: transparent;

}

a:active,

a:hover {

  outline:;

}

abbr[title] {

  border-bottom: 1px dotted;

}

b,

strong {

  font-weight: bold;

}

dfn {

  font-style: italic;

}

h1 {

  margin: .67em 0;

  font-size: 2em;

}

mark {

  color: #000;

  background: #ff0;

}

small {

  font-size: 80%;

}

sub,

sup {

  position: relative;

  font-size: 75%;

  line-height:;

  vertical-align: baseline;

}

sup {

  top: -.5em;

}

sub {

  bottom: -.25em;

}

img {

  border:;

}

svg:not(:root) {

  overflow: hidden;

}

figure {

  margin: 1em 40px;

}

hr {

  height:;

  -moz-box-sizing: content-box;

       box-sizing: content-box;

}

pre {

  overflow: auto;

}

code,

kbd,

pre,

samp {

  font-family: monospace, monospace;

  font-size: 1em;

}

button,

input,

optgroup,

select,

textarea {

  margin:;

  font: inherit;

  color: inherit;

}

button {

  overflow: visible;

}

button,

select {

  text-transform: none;

}

button,

html input[type="button"],

input[type="reset"],

input[type="submit"] {

  -webkit-appearance: button;

  cursor: pointer;

}

button[disabled],

html input[disabled] {

  cursor: default;

}

button::-moz-focus-inner,

input::-moz-focus-inner {

  padding:;

  border:;

}

input {

  line-height: normal;

}

input[type="checkbox"],

input[type="radio"] {

  box-sizing: border-box;

  padding:;

}

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

  height: auto;

}

input[type="search"] {

  -webkit-box-sizing: content-box;

     -moz-box-sizing: content-box;

          box-sizing: content-box;

  -webkit-appearance: textfield;

}

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {

  -webkit-appearance: none;

}

fieldset {

  padding: .35em .625em .75em;

  margin: 0 2px;

  border: 1px solid #c0c0c0;

}

legend {

  padding:;

  border:;

}

textarea {

  overflow: auto;

}

optgroup {

  font-weight: bold;

}

table {

  border-spacing:;

  border-collapse: collapse;

}

td,

th {

  padding:;

}

@media print {

  * {

    color: #000 !important;

    text-shadow: none !important;

    background: transparent !important;

    box-shadow: none !important;

  }

  a,

  a:visited {

    text-decoration: underline;

  }

  a[href]:after {

    content: " (" attr(href) ")";

  }

  abbr[title]:after {

    content: " (" attr(title) ")";

  }

  a[href^="javascript:"]:after,

  a[href^="#"]:after {

    content: "";

  }

  pre,

  blockquote {

    border: 1px solid #999;

    page-break-inside: avoid;

  }

  thead {

    display: table-header-group;

  }

  tr,

  img {

    page-break-inside: avoid;

  }

  img {

    max-width: 100% !important;

  }

  p,

  h2,

  h3 {

    orphans:;

    widows:;

  }

  h2,

  h3 {

    page-break-after: avoid;

  }

  select {

    background: #fff !important;

  }

  .navbar {

    display: none;

  }

  .table td,

  .table th {

    background-color: #fff !important;

  }

  .btn > .caret,

  .dropup > .btn > .caret {

    border-top-color: #000 !important;

  }

  .label {

    border: 1px solid #000;

  }

  .table {

    border-collapse: collapse !important;

  }

  .table-bordered th,

  .table-bordered td {

    border: 1px solid #ddd !important;

  }

}

Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：

  • 移除body的margin声明
  • 设置body的背景色为白色
  • 为排版设置了基本的字体、字号和行高
  • 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

Bootstrap的全局样式采用了“normalize.css”，但并没有一味的全部使用此重置样式，而是在此基础上进行了一些改良，让其更适合Bootstrap的设计思想。

bootstrap 全局样式设置的更多相关文章

  1. bootstrap全局样式二

    加form-grope是为了以后更好的管理,一组form写一个form-grope 显示如下: 并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-lab ...

  2. bootstrap全局样式

    内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...

  3. [Bootstrap]全局样式（五）

    辅助样式 1.情景文本色  .text-muted  .text-primary  .text-success  .text-info  .text-warning  .text-danger  {c ...

  4. [Bootstrap]全局样式（四）

    按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...

  5. [Bootstrap]全局样式（三）

    表格 1.基本类  .table  {width/margin-bottom/}  {padding/border-top} e.g.:<table class="table" ...

  6. [Bootstrap]全局样式（二）

    具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size                    mar ...

  7. [Bootstrap]全局样式（一）

    页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...

  8. bootstrap 全局样式

    reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...

  9. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

随机推荐

  1. 两年.net码农总结

    一直都是在博客园看文章,几乎每个两三天都会来,不管是看技术分享还是看经验总结,我觉得这真是个好地方. 工作两年,24.5岁,目前达到8.5K(即10W)的.net web. 文章水平不好,各位见谅了, ...

  2. Debian/Ubuntu 下网易云音乐无法由图标/列表 打开的解决方案

    前言 本文为使用图标或快捷方式直接打开网易云音乐的一个从安装说起的到解决问题的简单教程 环境 debian 9.5 理论上使用apt包管理器的发行版均支持 源使用国内的源即可,无需特殊指定 安装网易云 ...

  3. springboot(十二)：springboot单元测试、打包部署

    单元测试 1.在pom包中添加spring-boot-starter-test包引用 <dependency> <groupId>org.springframework.boo ...

  4. Win Server 2008 R2 IIS 默认只能添加一个 443 HTTPS 端口

    问题: 解决方案: 方法一: 然后在:C:\Windows\system32\inetsrv\config\applicationHost.config 找到 对应网站 <binding pro ...

  5. go通过swig封装、调用c++共享库的技术总结

    go通过swig封装.调用c++共享库的技术总结 @(知识记录) 1 简介 最近在研究golang,希望能对目前既有的python服务做一些优化,这些服务目前已经占用了6-7台机器.选择golang的 ...

  6. float导致出现大面积空白

    float导致出现大面积空白,解决方法: *{ padding: 0; margin: 0; overflow:hidden; }

  7. luogu P1641 [SCOI2010]生成字符串

    传送门 代码极短 \(O(n^2)\)dp是设\(f_{i,j,k}\)表示前\(i\)位,放了\(j\)个1,后面还可以接着放\(k\)个0的方案,转移的话,如果放0,\(k\)就要减1,反之放了1 ...

  8. 3、输入一个链表，按链表值从尾到头的顺序返回一个ArrayList。

    题目描述 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 思路: 利用栈“先进后出”的性质,将链表的值存入到栈里,然后将栈里的值存入到构建好的容器里,最后打印容器. class So ...

  9. MySQL中几个关于时间/时区的变量

    一.log_timestamps 1.1.官方解释 log_timestamps: Log timestamp format. Added in MySQL 5.7.2.This variable c ...

  10. Eclipse通用设置

    分类 Eclipse分为64位.32位,安装版.免安装版 查看Eclipse版本信息 Help - About Eclipse - Installation Details