【Bootstrap框架】——全局CSS样式（GlobalCSSStyle）
⽬录
1.CSSReset（样式重置）
box-sizingcss表格样式
允许以特定的⽅式定义匹配某个区域的特定元素，有三个参数：
content-box：默认值，盒⼦总宽度=margn+border+padding+width
border-box：推荐值，盒⼦总宽度=margn+width（border和padding算在width之内）
inherit：规定应从⽗元素继承 box-sizing 属性的值
常见样式重置：
*{
box-sizing: border-box;
}
html{
font-size: 10px;
}
body{
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#333;
font-size: 14px;
background-color:#fff;
}
p{
margin-bottom: 10px;
}
a{
color:#337ab7;
text-decoration: none;
}
a:hover{
color:#23527c;
text-decoration: underline;
}
h1{
font-size: 36px;
margin-top: 20px;
margin-bottom: 10px;
}
h2{
font-size: 30px;
margin-top: 20px;
margin-bottom: 10px;
}
h3{
font-size: 24px;
margin-top: 20px;
margin-bottom: 10px;
}
h4{
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
}
h5{
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
h6{
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
}
img{
border: 0;
vertical-align: middle;
}
2.按钮三种形式的按钮：
Btn按钮：<button>Btn按钮</button>
Link按钮：<input type="button" value="Input按钮" />
Input按钮：<a href="#">Link按钮</a>
-
按钮的默认样式图：
class=”btn btn-default”
常⽤的5种颜⾊
红⾊：class=”btn btn-danger”
绿⾊：class=”btn btn-success”
黄⾊：class=”btn btn-warning”
蓝⾊：class=”btn btn-info”
浅蓝⾊：class=”btn btn-primary”
4个常⽤的⼤⼩
Large：btn-lg ⼀般⽤于超⼤PC显⽰器
Medium：默认（md） ⼀般⽤于普通的PC显⽰器 Small：btn-sm ⼀般⽤于平板显⽰器
ExtraSmall：btn-xs ⼀般⽤于⼿机显⽰器
块级按钮
class=”btn btn-block”
3.图⽚
class=”img-rounded”
圆⾓图⽚：border-radius: 6px;
class=”img-sircle”
圆形图⽚：border-radius: 50%;
class=”img-thumbnail”
缩略图⽚：border、padding、max-width
class=”img-responsive”
响应式图⽚，每个在⼀⾏：display:block、max-width:100%
4.⽂本5种常见的基本颜⾊
红⾊：class=”text-danger”
绿⾊：class=”text-success”
黄⾊：class=”text-warning”
蓝⾊：class=”text-info”
浅蓝⾊：class=”text-primary”
5种常见的背景颜⾊
红⾊：class=”bg-danger”
绿⾊：class=”bg-success”
黄⾊：class=”bg-warning”
蓝⾊：class=”bg-info”
浅蓝⾊：class=”bg-primary”

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。