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

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值