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

来源：互联网发布：windows 测试udp端口编辑：程序博客网时间：2024/06/07 23:38

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

这里写图片描述

上面两种可以混搭，效果如图：
这里写图片描述

文本的对齐方式

text-align：left/right/center

左对齐：class=”text-left”
居中对齐：class=”text-center”
右对齐：class=”text-right”
两端对齐：class=”text-justify”

这里写图片描述

文本变形

大写文本：class=”text-uppercase”
小写文本：class=”text-lowercase”
大写字母开头文本：class=”text-capitalize”

这里写图片描述

行内块（img、p）的对齐

float：left/right、!important

左对齐：class=”pull-left”
右对齐：class=”pull-right”
清除浮动：class=”clearfix”

这里写图片描述

5.排版&代码&列表

<blockquote class="blockquote-reverse">    <p>三人行必有我师</p>    <footer>摘自《论语》</footer></blockquote>

这里写图片描述

更多特性参考网站

http://v3.bootcss.com/css/#type

6.表格

Bootstrap表格样式

class=”table”

这里写图片描述

四周带边框的表格样式

class=”table table-bordered”

这里写图片描述

隔行变色、悬停效果的表格

class=”table table-striped”
class=”table table-hover”

这里写图片描述

响应式表格

class=”table table-responsive”

此class必须用在table的父元素div上。变小后有边框，有滚动条。

7.栅格布局系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

系统提出了行（row）和列（col）的概念，一行默认均分为12列
行中只能放置列，不能放置内容，内容只能放置在列中
列中可以继续嵌套行
行必须放在容器中。Bootstrap默认提供了两种容器：.container（固定宽度的容器）和.container-fluid（流式容器）
把浏览器的屏幕分为4种：超大PC屏幕（lg>1200px）、普通PC屏幕（992px<md<1200px）、平板电脑屏幕（768px<sm<992px）、手机屏幕（xs<768px）
行必须声明class为.row；列必须声明class为.col-xs/sm/md/lg-* （*是一个数字，范围在1-12之间，指定某个列的占宽）
.col-xs-*对xs/sm/md/lg屏幕都有效
.col-sm-*对sm/md/lg屏幕都有效
.col-md-*md/lg屏幕都有效
.col-lg-*对lg屏幕都有效
可以为同一个div指定在不同屏幕下的多个宽度值。class="col-md-6 col-sm-8 col-xs-12"
在某种屏幕下隐藏的列：.hidden-xs：只在手机屏幕下隐藏、.hidden-sm：只在平板屏幕下隐藏、.hidden-md：只在PC屏幕下隐藏、.hidden-lg：只在超大PC屏幕下隐藏
列的偏移：class="col-xs-offset-2

Bootstrap默认提供两个容器类有如下样式：
1、.container 固定宽度的容器：

lg：容器宽1170px
md：容器宽970px
sm：容器宽750px
xs：宽度为auto
margin-left/right：auto；
padding-left/right：15px；
：before：防止子元素的margin越界
：after：防止子元素的margin越界，清除子元素浮动造成的影响

2、.container-fluid 流式容器，宽度随着父容器的改变而改变

width：auto；
margin-left/right：auto；
padding-left/right：15px；
：before：防止子元素的margin越界
：after：防止子元素的margin越界，清除子元素浮动造成的影响

超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) 栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 列（column）数 12 最大列（column）宽自动 ~62px ~81px ~97px 槽（gutter）宽 30px （每列左右均有 15px）可嵌套是偏移（Offsets）是列排序是

<h1 class="text-center">栅格布局系统</h1><div class="container">    <p class="text-center">一行中有一列</p>    <div class="row">        <div class="col-lg-1">LG-1</div>    </div>    <div class="row">        <div class="col-lg-2">LG-2</div>    </div>    <div class="row">        <div class="col-lg-3">LG-3</div>    </div>    <div class="row">        <div class="col-lg-4">LG-4</div>    </div>    <div class="row">        <div class="col-lg-5">LG-5</div>    </div>    <div class="row">        <div class="col-lg-6">LG-6</div>    </div>    <div class="row">        <div class="col-lg-7">LG-7</div>    </div>    <div class="row">        <div class="col-lg-8">LG-8</div>    </div>    <div class="row">        <div class="col-lg-9">LG-9</div>    </div>    <div class="row">        <div class="col-lg-10">LG-10</div>    </div>    <div class="row">        <div class="col-lg-11">LG-11</div>    </div>    <div class="row">        <div class="col-lg-12">LG-12</div>    </div>    <p class="text-center">一行中有多列</p>    <div class="row">        <div class="col-lg-1">LG-1</div>        <div class="col-lg-1">LG-1</div>        <div class="col-lg-1">LG-1</div>    </div>    <div class="row">        <div class="col-lg-3">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur deleniti,            doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa dignissimos doloremque enim modi            tempore veritatis. Fugiat ipsum nostrum optio possimus totam.        </div>        <div class="col-lg-3">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae, delectus            magni molestiae molestias non quaerat quod! Dolores explicabo illum incidunt ipsum libero possimus quos            rerum sunt, suscipit temporibus unde.        </div>        <div class="col-lg-3">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias debitis dolores            expedita nostrum reiciendis. Ad, commodi dolor exercitationem explicabo in mollitia nisi perferendis, quo            repellendus sapiente sequi similique temporibus voluptatibus!        </div>    </div>    <p class="text-center">为同一个div指定在不同屏幕下的多个宽度值</p>    <div class="row">        <div class="col-md-6 col-sm-8 col-xs-12">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.            Consectetur deleniti, doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa            dignissimos doloremque enim modi tempore veritatis. Fugiat ipsum nostrum optio possimus totam.        </div>    </div>    <p class="text-center">在某种屏幕下隐藏的列</p>    <div class="row">        <div class="col-xs-7 col-sm-6">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.            Consectetur deleniti, doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa            dignissimos doloremque enim modi tempore veritatis. Fugiat ipsum nostrum optio possimus totam.        </div>        <div class="col-xs-5 col-sm-4">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.            Consectetur deleniti, doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa            dignissimos doloremque enim modi tempore veritatis. Fugiat ipsum nostrum optio possimus totam.        </div>        <div class="col-sm-2 hidden-xs">LG-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.            Consectetur deleniti, doloribus exercitationem nisi quis repellendus sapiente. Consequuntur culpa            dignissimos doloremque enim modi tempore veritatis. Fugiat ipsum nostrum optio possimus totam.        </div>    </div>    <p class="text-center">列的偏移</p>    <div class="row">        <div class="col-xs-2">            LG-3 totam.        </div>        <div class="col-xs-2 col-xs-offset-2">            LG-3 totam.        </div>    </div>

这里写图片描述

8.响应式表单

三种表单：默认表单、行内表单、水平表单
Bootsrap编码规范要求：所有的输入控件都必须有对应的label。若不想在界面中看到输入控件的label，可以声明仅屏幕阅读器可见：class=”sr-only”

默认表单

单选框、复选框必须使用label包含起来，省略for属性

表单样式： class=”form-control”
下面注释样式：class=”help-block”
div分组样式：class=”form-group”
单选框样式：class=”checkbox”（给父元素div用）

这里写图片描述

代码：

<form>    <div class="form-group">        <label for="uname">用户名：</label>        <input class="form-control" type="text" id="uname" placeholder="请输入用户名："/>        <span class="help-block">用户名必须包含数字、字母或下划线</span>    </div>    <div class="form-group">        <label for="upwd">密码：</label>        <input class="form-control" type="password" id="uname" placeholder="请输入密码："/>        <span class="help-block">密码长度在6-12位之间</span>    </div>    <div class="checkbox">        <label>            <input type="checkbox">我同意本站的使用条款        </label>    </div>    <input class="btn btn-success" type="button" value="提交" />    <div class="checkbox">        <label>            <input type="checkbox">我同意本站的使用条款        </label>    </div></form>

行内表单

行内样式： class=”form-inline”

这里写图片描述

代码：

<form class="form-inline">    <div class="form-group">        <label for="uname2">用户名：</label>        <input class="form-control" type="text" id="uname" placeholder="请输入用户名："/>    </div>    <div class="form-group">        <label for="upwd2">密码：</label>        <input class="form-control" type="password" id="uname" placeholder="请输入密码："/>    </div>    <input class="btn btn-success" type="button" value="提交"/></form>

水平表单

必须与变形后的栅格系统组合应用
变形后的栅格系统：

.container=>.form-horizontal
.row=>.form-group
.col…不变

文本右对齐：class=”control-label”
若想label中的文字左对齐，则col声明在div上；右对齐放在label上

这里写图片描述

代码：

<form class="form-horizontal">    <div class="form-group">        <div>            <label for="uname3" class="control-label col-xs-2">用户名：</label>        </div>        <div class="col-xs-6">            <input class="form-control" type="text" id="uname" placeholder="请输入用户名："/>        </div>        <div class="col-xs-4">            <span class="help-block">用户名必须包含数字、字母或下划线</span>        </div>    </div>    <div class="form-group">        <div>            <label for="upwd3" class="control-label col-xs-2">密码：</label>        </div>        <div class="col-xs-6">            <input class="form-control" type="password" id="uname" placeholder="请输入密码："/>        </div>        <div class="col-xs-4">            <span class="help-block">密码长度在6-12位之间</span>        </div>    </div>    <div class="form-group">        <div class="col-xs-offset-2 col-xs-10">            <div class="checkbox">                <label>                    <input type="checkbox">我同意本站的使用条款                </label>            </div>        </div>    </div>    <div class="form-group">        <div class="col-xs-offset-2 col-xs-10">            <input class="btn btn-success" type="button" value="提交"/>        </div>    </div></form>

阅读全文

0 0