首页 > 代码库 > 全局CSS样式

全局CSS样式

2024-09-26 21:26:02   216人阅读

bootstrap全局css样式：一共12个内容模块
概览
栅格系统
排版
代码
表格
表单
按钮
图片
辅助类
响应式工具
使用Less
使用Sass
一、概览类
1.html5文档类型
<!DOCTYPE html>

2.移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">

3.排版与链接
bootstrap排版、链接样式设置了基本的全局样式。分别是：
* 为body元素设置background-color: #fff;
* 使用@font-family-base, @font-size-base和@line-height-base变量作为排版的基本参数
* 为所有链接设置了基本颜色@link-color，并且当链接处于:hover状态时才添加下划线
这些样式都能在scaffolding.less文件中找到对应的源码

4.Normalize.css
为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

5.布局容器
bootstrap需要为页面内容和栅格系统包裹一个.container容器
.container 类用于固定宽度并支持响应式布局的容器
<div class="container"></div>
.container-fluid 类用于100%宽度，占据全部视口(viewport)的容器
<div class="container-fluid"></div>

二、栅格系统
1.简介
行：row
列：column

2.媒体查询
在栅格系统中，我们在Less文件中使用以下媒体查询来创建关键的分界点阈值
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

3.栅格参数
xs超小屏幕 手机 0< xs <768px
sm小屏幕 平板 768<= sm <992
md中等屏幕 桌面显示器 992<= md <1200
lg大屏幕 大桌面显示器 1200<= lg <10000
一行都是分为12列
.col-xs-
.col-sm-
.col-md-
.col-lg-

4.实例：从堆叠到水平排列（如在div内布局）
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>

5.实例：流式布局容器（需要container容器来包裹）
<div class="container">
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
</div>

6.移动设备和桌面屏幕（对列添加两个类就行了，因为它是自动响应）
<div class="row">
<div class="col-xs-12 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>

7.实例：手机、平板、桌面（对每一种设备添加一个类就行了）
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>

8.实例：多余的列（column）将另起一行排列（因为一行最多有12列）
如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。
<div class="row">
<div class="col-xs-9"></div>
<div class="col-xs-4"></div>
<div class="col-xs-6"></div>
</div>

9.响应式类重置（这种情况很少用）
即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。
<div class="row">
<div class="col-xs-6 col-sm-3"></div>
<div class="col-xs-6 col-sm-3"></div>

<div class="clearfix visible-xs-block"></div>
</div>

10.列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

11.嵌套列
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-xs-8 col-sm-6"></div>
<div class="col-xs-4 col-sm-6"></div>
</div>
</div>
</div>

12.列排序（很少用）
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

13.Less mixin和变量（自定义变量，现在还不太懂，以后再学）
除了用于快速布局的预定义栅格类，Bootstrap 还包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。

三、排版
1.标题
h1~h6
<h1>h1 heading <small>副标题</small></h1> //用small来标注副标题

2.页面主体
bootstrap将全局font-size设置为14px，line-height设置为1.428
<p class="lead"></p> //.class中心内容

3.内联文本元素
<mark></mark> 标记文本
<del></del> 删除文本
<s></s> 无用文本
<ins></ins> 插入文本
<u></u> 带下划线文本
<small></small> 小号文本
<strong></strong> 着重文本
<em></em> 斜体文本
<b></b> 高亮单词或短语
<i></i> 主要用于发言、技术词汇

4. 对齐
text-left <p class="text-left"></p>
text-center
text-right
text-justify
text-nowrap

5.改变大小写
text-lowercase <p class="text-lowercase"></p>
text-uppercase
text-capitalize

6.略缩语
<abbr title="attribute">attr</abbr> 基本略缩语
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> 首字母略缩语

7.地址
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>

8.引用
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

9.列表（重点）
ul>li 无序列表
ol>li 有序列表
<ul class="list-unstyled"></ul> 无样式列表
<ul class="list-inline"></ul> 内联列表

10.描述
<dl class="dl-horizontal"> 水平排列描述
<dt></dt>
<dt></dt>
</dl>

四、代码
<code>&lt;section&gt;</code> 内联代码
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 用户输入
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre> 代码块
<var>y</var> = <var>m</var><var>x</var> + <var>b</var> 变量
<samp>This text is meant to be treated as sample output from a computer program.</samp> 程序输出

五、表格
1.<table class="table table-striped"></table> 表格标签
.table 表格类
.table-striped 条纹状表格
.table-bordered 带边框表格
.table-hover 鼠标悬停
.table-condensed 紧缩表格

2.状态类（通过这些状态类为行或单元格设置颜色）
.active <tr class="active"></tr> <td class="active"></td>
.success
.info
.warning
.danger

3.响应式表格
<div class="table responsive">
<table class="table"></table>
</div>

六、表单
<form></form>
<form class="form-inline"></form>
<form class="form-horizontal"><form>
1.基本实例（表单内的每一块内容都用div来包裹）
<form> //默认为块级元素，添加form-inline就可以改为内联元素
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>

2.内联表单
<form> //默认为块级元素，添加form-inline就可以改为内联元素
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

3.水平排列的表单
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>

4.被支持的控件
.form-control
(1)输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
<input type="text" class="form-control" placeholder="text input">
(2)文本域
<textarea class="form-control" row=3></textarea>
(3)多选和单选框
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it‘s great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>

<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it‘s great
</label>
</div>
多选框
<label class="checkbox-inline"> //radio-inline
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
(4)下拉列表
<select class="form-control"> //<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
(5)静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
</form>
(6)状态
焦点状态 默认
禁用状态 <input class="form-control" id="disabledInput" type="text" disabled>
被禁用的 fieldset
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<fieldset>
</form>
只读状态 <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
help text <span id="helpBlock" class="help-block">A block</span>
校验状态（重点）
添加额外图标
(7)控件尺寸
高度尺寸：
.input-lg <input class="form-control input-lg" type="text">
默认尺寸
.input-sm

水平排列的表单组的尺寸:
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
</form>

调整列（column）尺寸:
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>

七、按钮类
1.按钮：
button: btn

2.按钮样式：
btn-default btn-primary btn-success
btn-info btn-warning btn-danger btn-link

3.按钮尺寸：
btn-lg btn-sm bt-xs 没写尺寸的类就是默认尺寸

4.转为块级元素：
btn-block

5.激活状态
active <button type="button" class="btn btn-primary btn-lg active">Primary button</button>

6.禁用状态
disabled
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
不知道这样可以吗？<button type="button" class="btn btn-lg btn-primary disabled">Primary button</button>

6.链接<a>元素转为按钮角色
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

八、图片
<img src="..." alt="..." class="img-rounded"> 方形
<img src="..." alt="..." class="img-circle"> 圆形
<img src="..." alt="..." class="img-thumbnail"> 略缩图形

九、辅助类
1.情境文本颜色
.text-muted <p class="text-muted">...</p>
.text-primary
.text-success
.text-info
.text-warning
.text-danger

2.情境背景色
.bg-primary <p class="bg-primary">...</p>
.bg-success
.bg-info
.bg-warning
.bg-danger

3.关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

4.三角符号
<span class="caret"></span>

5.快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}

// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}

6.让内容块居中
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}

// Usage as a mixin
.element {
.center-block();
}

7.清除浮动
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

// Usage as a mixin
.element {
.clearfix();
}

8.显示或隐藏内容
<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}

// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}

9.屏幕阅读器和键盘导航
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}

10.图片替换
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}

 

全局CSS样式


联系
我们