HTML

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>全局样式</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8.  
  9. <body>
  10.  
  11. <!-- Main jumbotron for a primary marketing message or call to action -->
  12. <div class="jumbotron">
  13. <h1>Hello, world!</h1>
  14. <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>
  15. <p><a href="#" >Learn more »</a></p>
  16. </div>
  17.  
  18. </body>
  19. </html>

CSS

  1. html {
  2. font-family: sans-serif;
  3. -webkit-text-size-adjust: 100%;
  4. -ms-text-size-adjust: 100%;
  5. }
  6. body {
  7. margin:;
  8. }
  9. article,
  10. aside,
  11. details,
  12. figcaption,
  13. figure,
  14. footer,
  15. header,
  16. hgroup,
  17. main,
  18. nav,
  19. section,
  20. summary {
  21. display: block;
  22. }
  23. audio,
  24. canvas,
  25. progress,
  26. video {
  27. display: inline-block;
  28. vertical-align: baseline;
  29. }
  30. audio:not([controls]) {
  31. display: none;
  32. height:;
  33. }
  34. [hidden],
  35. template {
  36. display: none;
  37. }
  38. a {
  39. background: transparent;
  40. }
  41. a:active,
  42. a:hover {
  43. outline:;
  44. }
  45. abbr[title] {
  46. border-bottom: 1px dotted;
  47. }
  48. b,
  49. strong {
  50. font-weight: bold;
  51. }
  52. dfn {
  53. font-style: italic;
  54. }
  55. h1 {
  56. margin: .67em 0;
  57. font-size: 2em;
  58. }
  59. mark {
  60. color: #000;
  61. background: #ff0;
  62. }
  63. small {
  64. font-size: 80%;
  65. }
  66. sub,
  67. sup {
  68. position: relative;
  69. font-size: 75%;
  70. line-height:;
  71. vertical-align: baseline;
  72. }
  73. sup {
  74. top: -.5em;
  75. }
  76. sub {
  77. bottom: -.25em;
  78. }
  79. img {
  80. border:;
  81. }
  82. svg:not(:root) {
  83. overflow: hidden;
  84. }
  85. figure {
  86. margin: 1em 40px;
  87. }
  88. hr {
  89. height:;
  90. -moz-box-sizing: content-box;
  91. box-sizing: content-box;
  92. }
  93. pre {
  94. overflow: auto;
  95. }
  96. code,
  97. kbd,
  98. pre,
  99. samp {
  100. font-family: monospace, monospace;
  101. font-size: 1em;
  102. }
  103. button,
  104. input,
  105. optgroup,
  106. select,
  107. textarea {
  108. margin:;
  109. font: inherit;
  110. color: inherit;
  111. }
  112. button {
  113. overflow: visible;
  114. }
  115. button,
  116. select {
  117. text-transform: none;
  118. }
  119. button,
  120. html input[type="button"],
  121. input[type="reset"],
  122. input[type="submit"] {
  123. -webkit-appearance: button;
  124. cursor: pointer;
  125. }
  126. button[disabled],
  127. html input[disabled] {
  128. cursor: default;
  129. }
  130. button::-moz-focus-inner,
  131. input::-moz-focus-inner {
  132. padding:;
  133. border:;
  134. }
  135. input {
  136. line-height: normal;
  137. }
  138. input[type="checkbox"],
  139. input[type="radio"] {
  140. box-sizing: border-box;
  141. padding:;
  142. }
  143. input[type="number"]::-webkit-inner-spin-button,
  144. input[type="number"]::-webkit-outer-spin-button {
  145. height: auto;
  146. }
  147. input[type="search"] {
  148. -webkit-box-sizing: content-box;
  149. -moz-box-sizing: content-box;
  150. box-sizing: content-box;
  151. -webkit-appearance: textfield;
  152. }
  153. input[type="search"]::-webkit-search-cancel-button,
  154. input[type="search"]::-webkit-search-decoration {
  155. -webkit-appearance: none;
  156. }
  157. fieldset {
  158. padding: .35em .625em .75em;
  159. margin: 0 2px;
  160. border: 1px solid #c0c0c0;
  161. }
  162. legend {
  163. padding:;
  164. border:;
  165. }
  166. textarea {
  167. overflow: auto;
  168. }
  169. optgroup {
  170. font-weight: bold;
  171. }
  172. table {
  173. border-spacing:;
  174. border-collapse: collapse;
  175. }
  176. td,
  177. th {
  178. padding:;
  179. }
  180. @media print {
  181. * {
  182. color: #000 !important;
  183. text-shadow: none !important;
  184. background: transparent !important;
  185. box-shadow: none !important;
  186. }
  187. a,
  188. a:visited {
  189. text-decoration: underline;
  190. }
  191. a[href]:after {
  192. content: " (" attr(href) ")";
  193. }
  194. abbr[title]:after {
  195. content: " (" attr(title) ")";
  196. }
  197. a[href^="javascript:"]:after,
  198. a[href^="#"]:after {
  199. content: "";
  200. }
  201. pre,
  202. blockquote {
  203. border: 1px solid #999;
  204.  
  205. page-break-inside: avoid;
  206. }
  207. thead {
  208. display: table-header-group;
  209. }
  210. tr,
  211. img {
  212. page-break-inside: avoid;
  213. }
  214. img {
  215. max-width: 100% !important;
  216. }
  217. p,
  218. h2,
  219. h3 {
  220. orphans:;
  221. widows:;
  222. }
  223. h2,
  224. h3 {
  225. page-break-after: avoid;
  226. }
  227. select {
  228. background: #fff !important;
  229. }
  230. .navbar {
  231. display: none;
  232. }
  233. .table td,
  234. .table th {
  235. background-color: #fff !important;
  236. }
  237. .btn > .caret,
  238. .dropup > .btn > .caret {
  239. border-top-color: #000 !important;
  240. }
  241. .label {
  242. border: 1px solid #000;
  243. }
  244. .table {
  245. border-collapse: collapse !important;
  246. }
  247. .table-bordered th,
  248. .table-bordered td {
  249. border: 1px solid #ddd !important;
  250. }
  251. }

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. Unity PC端发布失败解决办法

    Unity的PC端有时候发布的时候报错.原因可能是你的游戏里面使用了NGUI的label,而且字体选择的是unity自带的字体.因为支持中文.在选择unity自带的字体时最好都选一样的字体.如果一个l ...

  2. Java Map 按Key排序和按Value排序【转】【补】

    package kingtool.sort; import java.util.ArrayList; import java.util.Collections; import java.util.Co ...

  3. Dubbo协议

    参考dubbo官方文档http://dubbo.apache.org/zh-cn/docs/user/references/protocol/dubbo.html dubbo共支持如下几种通信协议: ...

  4. groovy.lang.GroovyRuntimeException: Conflicting module versions

    在运行groovy的junit方法时,报了这个错误: java.lang.ExceptionInInitializerError at org.codehaus.groovy.reflection.C ...

  5. Git与GitHub学习笔记(五)一次提交失败的记录

    代码已经跟踪了,添加注释说明,但是总是添加不了 error: pathspec 'live-page'' did not match any file(s) known to git. 重复了好多遍, ...

  6. Bootstrap的响应式后台管理模板推荐

    1.Admin LTE 该模版开源免费.已用到项目中,客户评价说UI很好看... AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕 ...

  7. .NET面试题系列(十二)Dictionary原理

    序言 Dictionary Dictionary的开发人员都了解,和List相比,字典添加会慢,但是查找会比较快. Dictionary的本质 --- 两个数组.这是典型的用空间换取时间的做法. 先来 ...

  8. POJ2031 Building a Space Station【最小生成树】

    题意: 就是给出三维坐标系上的一些球的球心坐标和其半径,搭建通路,使得他们能够相互连通.如果两个球有重叠的部分则算为已连通,无需再搭桥.求搭建通路的最小边长总和是多少. 思路: 先处理空间点之间的距离 ...

  9. (原创 开源)AppWidge的使用—桌面便利贴

    Android平台的一大特色就是支持桌面插件——AppWidget. 且不说,AppWidget是否会影响系统的流畅性,AppWidget确实是满足了用户个性化和快捷操作的需要. 常见的AppWidg ...

  10. 课程5:Spring框架2016版视频--视频列表目录

    \day01视频\01-今天内容介绍.avi; \day01视频\02-spring的相关概念.avi; \day01视频\03-spring的ioc底层原理(一).avi; \day01视频\04- ...