Boostrap全局CSS样式

简介: Boostrap全局CSS样式

1、Bootstrap提供的CSS Reset

  * { box-sizing: border-box; }

  body { font ...; color: #333; background: ...; margin: 0;}

  h1 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h2 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h3 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h4  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;} 

  h5  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;} 

  h6  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;} 

  a { color:;  text-decoration: ;}

  img { border: 0;  vertical-align: middle; }

  p { margin-bottom:10px; }

  ......

2、Bootstrap全局CSS样式——按钮——简单&有趣

  .btn { padding:;  border: ;}

  .btn-default { color:;  background:;  border-color:;}

----------------------

  .btn-danger

  .btn-success

  .btn-warning

  .btn-info

  .btn-primary

---------------------

  .btn-lg

  .btn-sm

  .btn-xs

----------------------

  .btn-block

----------------------

  .pull-left { float: left; }

  .pull-right { float: right; }

3、Bootstrap全局CSS样式——图片——简单&有趣

  .img-rounded

  .img-circle

  .img-thumbnail 缩略图片/拇指图片

  .img-responsive  响应式图片

4、Bootstrap全局CSS样式——排版和代码

 .text-danger

 .text-success

 .text.warning

 .text-info

 .text-primary

 .bg-danger

 .bg-success

 .bg-warning

 .bg-info

 .bg-primary

 .text-left

 .text-right

 .text-center

 .text-justify  文本两端调整对齐

 .text-uppercase  

 .text-lowercase

 .text-capitalize  

 .list-unstyled

 .list-inline    

5、Bootstrap全局CSS样式——表格——简单&有趣

  .table

  .table-bordered 带边框的表格

  .table-responsive 响应式表格  注意:使用在table的父元素上,而不是table上

  .table-striped 隔行变色的表格

  .table-hover 带悬停效果的表格

目录
相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
31 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
28 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
42 0
|
13天前
|
前端开发
|
16天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
20天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
21 9
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
23 0
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 017 HTML样式
编程笔记 html5&css&js 017 HTML样式
|
2月前
|
前端开发
css实现风车样式
css实现风车样式
14 0