bootstrap对HTML标签的默认样式有哪些修改?

 CSS Reset:重新设置HTML标签的默认样式。
  (1)重设了盒子模型的计算方法  * { box-sizing: border-box; }
  (2)重设了所有元素的默认字体   14px/1.42857143 "Helvetica Neue"
  (3)body {  margin: 0;   color: #333;    background-color: #fff;}
  (4)h1~h6 { font-size: xxpx;   margin-top: 20px/10px;  margin-botton: 10px;}
  (5)a { color: #xxxxx;   text-decoration: none;}
CSS布局陷阱——子元素的margin-top越界:
若父元素没有上边框/上margin,则第一个子元素的margin-top会越界!
最佳解决方案:
.parent2:before {
      content: ‘  ‘;
      display: table;
}

父元素中所有子元素由于浮动造成的影响,最佳解决方案:
parent:after  {
  content: ‘  ‘;
  display: table;
  clear: both;
}
6.Boostrap提供的全局CSS样式——按钮相关样式
  提示:按钮相关的样式可以作用于button/input/a三种元素
  .btn              设置了按钮的padding、margin、font、border
  --------------------------------------------------------------------
  .btn-default    设置了按钮的color、background、border
  Bootstrap五种常用颜色:
  .btn-warning    警告色(橙黄色)的按钮
  .btn-danger    危险色(红色)的按钮
  .btn-info        提示色(浅蓝色)的按钮
  .btn-success    成功色(绿色)的按钮
  .btn-primary    基础色(深蓝色)的按钮
 Bootstrap四种大小:
  .btn-lg            大号按钮(large)
  默认            默认大小
  .btn-sm        小号按钮(small)
  .btn-xs            超小号按钮(extra small)
1.全局CSS样式——图片
  .img-circle            border-radius:50%
  .img-rounded        border-radius:6px;
  .img-thumbnail        border padding
  .img-responsive        max-width  display
2.全局CSS样式——文本
  .text-warning
  .text-success
  .text-danger
  .text-info
  .text-primary
  -------------------
  .text-lowercase
  .text-uppercase
  .text-capitalize
  -------------------
  .text-left
  .text-center
  .text-right        右对齐
  .text-justify    (两端)调整对齐
 ---------------------
  .bg-warning
  .bg-success
  .bg-danger
  .bg-info
  .bg-primary
----------------------
  .pull-left        float: left;
  .pull-right        float: right;
  .clearfix            clear:both;
-----------------------
  .show            display:block;
  .hidden            display:none;
table全局样式
.table          width   margin-bottom     .table>td
  .table-bordered      border:1px solid #ddd;
  .table-condensed        把单元格的padding有8px改为5px,内容看起来“紧凑”些
  .table-striped        条纹状表格,为奇数tr添加了一个浅色的背景色
  .table-hover            当鼠标悬停在tr上时,添加浅色的背景色
  .table-responsive        响应式表格——屏幕变小时,出现水平滚动条——该class不能用于<table>,只能用于其父元素<div>上!
  --------------------------------------------------------------
  用在tr和td上的class——WebStorm默认没有提示
.danger        背景色淡红色,且悬停后变为深红色
.warning        背景色淡黄色,且悬停后变为深黄色
.info            背景色淡蓝色,且悬停后变为深蓝色
.success        背景色淡绿色,且悬停后变为深绿色
.active        背景色淡灰色,且悬停后变为深灰色
时间: 2024-10-22 06:56:57

bootstrap对HTML标签的默认样式有哪些修改?的相关文章

css的reset和常用的html标签的默认样式整理

先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em;} blockquote{margin: 16px 1em;} ul{list-style-type: disc;padding-left:40px;margin: 1em 0;} ol{list-style-type: decimal; padding-left:40px; margin:1em

你们有关注过HTML标签的默认样式和浏览器默认样式吗?

HTML默认样式 html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示,未显示的将以内联元素显示,该列表针对HTML4版本,部分元素在XHTML1中将废弃*/ li { display:

HTML的各个标签的默认样式

1 head{ display: none } 2 body{ margin: 8px;line-height: 1.12 } 3 button, textarea,input, object,select { display:inline-block;} 4 ol, ul, dir,menu, dd{ margin-left: 40px } 5 i, cite, em,var, address{ font-style: italic } 6 7 //块级元素 8 html, body, div

教你小三角,适用移动端等,解决移动端a标签的默认样式

1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,左边框,的背景颜色设置成透明的,来实现,如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #demo { width: 0; height: 0; /*边框的宽20px*/

select标签的默认样式修改

在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通过下面的css才能修改select的border-radius .select { -webkit-appearance: none; -webkit-border-radius: 0px; } 但是这个方法会让select自带的三角箭头消失. 可以通过background来设置一个背景三角箭头来解

&lt;p&gt;标签的默认样式会留下空白,怎样用css样式来删除空白

把margin padding 都设置为 0 : { margin:0; padding:0; } // 单位 px可以省略 示例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> </head>

a标签去除默认样式

1 /*包含以下四种的链接*/ 2 a { 3 text-decoration: none; 4 } 5 /*正常的未被访问过的链接*/ 6 a:link { 7 text-decoration: none; 8 } 9 /*已经访问过的链接*/ 10 a:visited { 11 text-decoration: none; 12 } 13 /*鼠标划过(停留)的链接*/ 14 a:hover { 15 text-decoration: none; 16 } 17 /* 正在点击的链接*/ 1

更改BootStrap popover的默认样式

1 .popover { 2 position: absolute; 3 top: 0; 4 left: 0; 5 z-index: 1060; 6 display: none; 7 max-width: 276px; 8 padding: 1px; 9 font-size: 14px; 10 font-weight: 400; 11 line-height: 1.42857143; 12 text-align: left; 13 white-space: normal; 14 backgrou

修改select默认样式,兼容IE9

前面有篇文章已经提供了如何修改select标签的默认样式,但是只能兼容到ie10,要兼容ie9只能模拟一个类似的 html结构: <div class="select_diy"> <select> <option value="产品咨询1">产品咨询1</option> <option value="产品咨询2">产品咨询2</option> <option value