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/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 全局样式设置的更多相关文章
- bootstrap全局样式二
加form-grope是为了以后更好的管理,一组form写一个form-grope 显示如下: 并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-lab ...
- bootstrap全局样式
内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...
- [Bootstrap]全局样式(五)
辅助样式 1.情景文本色 .text-muted .text-primary .text-success .text-info .text-warning .text-danger {c ...
- [Bootstrap]全局样式(四)
按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...
- [Bootstrap]全局样式(三)
表格 1.基本类 .table {width/margin-bottom/} {padding/border-top} e.g.:<table class="table" ...
- [Bootstrap]全局样式(二)
具体排版 1.标题和标题类 <h1> ~<h6>和.h1~h6|副标题<small>和.small font-size mar ...
- [Bootstrap]全局样式(一)
页面必须设置为html5文档类型 <!DOCTYPE html> <html lang="zh-CN"> ... </html> 适应移动设备 ...
- bootstrap 全局样式
reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
随机推荐
- python---生成验证码图片
工具插件verifycode.py中,记得使用时需要在路由根目录中引入文字资源文件 # coding:utf8 # __author: Administrator # date: // # /usr/ ...
- springCloud相关推荐
最近看到微服务很火,也是未来的趋势 所以就去学习下,在dubbo和spring cloud之间我选择了从spring cloud,主要有如下几种原因: dubbo主要专注于微服务中的一个环节--服务治 ...
- windows单机环境下配置tomcat集群
场景:我们在平常联系中,需要涉及到tomcat中,但是电脑不够怎么办,肯定是在自己的电脑上模拟集群,就是装多个tomcat,这时候需要稍微配置下.如果是多个服务器,那不用配置,直接怼!!! 这里介绍的 ...
- Hive记录-Hive on Spark环境部署
1.hive执行引擎 Hive默认使用MapReduce作为执行引擎,即Hive on mr.实际上,Hive还可以使用Tez和Spark作为其执行引擎,分别为Hive on Tez和Hive on ...
- Spring面向切面编程AOP(around)实战
spring aop的环绕通知around功能强大,我们这里就不细说,直接上代码,看着注释就能明白 需要的可以点击下载源码 1.如果使用注解的方式则需要先创建个注解类 package com.mb.a ...
- HTML5中<template>标签的详细介绍
HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...
- Android的网络通信机制
1. Socket接口 不常用 2.HttpURLConnection接口 3. HttpClient接口 http://blog.csdn.net/ccc20134/article/details/ ...
- 在使用NSArray打印的时候如果遇到中文字符那么会打印出来编码。
在使用NSArray打印的时候如果遇到中文字符那么会打印出来编码,如下代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any addition ...
- 【转】深入浅出JMS(二)--ActiveMQ简单介绍以及安装
现实的企业中,对于消息通信的应用一直都非常的火热,而且在J2EE的企业应用中扮演着特殊的角色,所以对于它研究是非常有必要的. 这篇博文介绍一款开源的JMS具体实现——ActiveMQ.ActiveMQ ...
- Qt5.8 在windows下mingw静态编译
官方对编译一些条件介绍:https://doc.qt.io/qt-5/windows-requirements.html 在默认情况下,用QtCreator编译程序时,使用的是动态编译.编译好的程序在 ...