【Bootstrap框架】——全局CSS样式（Global CSS Style）

目录

1.CSSReset（样式重置）
2.按钮
3.图片
4.文本
5.排版&代码&列表
6.表格
7.栅格布局系统
8.响应式表单

1.CSSReset（样式重置）

box-sizing

允许以特定的方式定义匹配某个区域的特定元素，有三个参数：

• content-box：默认值，盒子总宽度=margn+border+padding+width
• border-box：推荐值，盒子总宽度=margn+width（border和padding算在width之内）
• inherit：规定应从父元素继承 box-sizing 属性的值

详细参考：http://www.w3school.com.cn/cssref/pr_box-sizing.asp

---

常见样式重置：

*{
    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”
浅蓝色&