bootstrap学习之全局样式

  1 html {
  2   font-family: sans-serif;
  3   -webkit-text-size-adjust: 100%;
  4       -ms-text-size-adjust: 100%;
  5 }
  6 body {
  7   margin: 0;
  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: 0;
 33 }
 34 [hidden],
 35 template {
 36   display: none;
 37 }
 38 a {
 39   background: transparent;
 40 }
 41 a:active,
 42 a:hover {
 43   outline: 0;
 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: 0;
 71   vertical-align: baseline;
 72 }
 73 sup {
 74   top: -.5em;
 75 }
 76 sub {
 77   bottom: -.25em;
 78 }
 79 img {
 80   border: 0;
 81 }
 82 svg:not(:root) {
 83   overflow: hidden;
 84 }
 85 figure {
 86   margin: 1em 40px;
 87 }
 88 hr {
 89   height: 0;
 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: 0;
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: 0;
133   border: 0;
134 }
135 input {
136   line-height: normal;
137 }
138 input[type="checkbox"],
139 input[type="radio"] {
140   box-sizing: border-box;
141   padding: 0;
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: 0;
164   border: 0;
165 }
166 textarea {
167   overflow: auto;
168 }
169 optgroup {
170   font-weight: bold;
171 }
172 table {
173   border-spacing: 0;
174   border-collapse: collapse;
175 }
176 td,
177 th {
178   padding: 0;
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: 3;
221     widows: 3;
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 }
时间: 2024-08-10 00:50:23

bootstrap学习之全局样式的相关文章

BootStrap 之 CSS全局样式中的图片

使用 BootStrap 中的CSS全局样式,我们就可以不用自己定义CSS样式了. 响应式图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

BootStrap 之 CSS全局样式中的表单

不使用BootStrap 之 CSS全局样式中的表单,自己也不定义CSS样式 <form> <div> <label>Email address</label> <input type="email" placeholder="Email"> </div> <div> <label>Password</label> <input type="p

BootStrap 之 CSS全局样式中的表格

不使用BootStrap 之 CSS全局样式中的表格,自己也不定义CSS样式 <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐

bootstrap复习:全局样式

一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 二.布局容器 1.Bootstrap 需要为

bootstrap之CSS全局样式

一.排版样式(paiban) 1.标题标签 <body style="padding:20px"> <h1>h1.bootstrap</h1><br/> <h2>h2.bootstrap</h2><br/> <h3>h3.bootstrap</h3><br/> </body> 2.页面主体 <p>.....</p>   段落标签 中

Bootstrap学习 - 全局CSS样式

栅格Grid  <!-行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中-> <div class="container"> <div class="row"> <div class="col-md-1">col-md-1</div> <!-一行最多12列, col-xs, col-sm, col-md, col-

BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立,在github上开源之后,迅速成为该站上最多人watch&fork的项目.大量工程师踊跃为该项目贡献代码,社区惊人地活跃,代码版本进化非常快速,官方文档质量极其高(可以说是优雅),同时涌现了许多基于Bootstrap建设的网站:界面清新.简洁;要素

bootstrap 全局样式设置

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/boo

Bootstrap学习(一):Bootstrap简介

一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 详细的来说,Bootstrap是一个简单.灵活的,可用于搭建简洁漂亮WEB页面的HTML,CSS,JAVASCRIPT的工具集.BootStrap基于HTML5 和 CSS3,具有漂亮的设计,友好的学习曲线,卓越的兼容性,还有12列的响应式栅格结构,丰富的组件等等.简单的说,Bootstr