一、概览
1、HTML5文档类型
<!DOCTYPE html>
<html lang="zh-CN">
</html>
2、移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3、排版与链接
background-color:#fff; @font-family-base、@font-size-base、@line-height-base、@link-color、:hover
4、使用了Normalize.css
5、布局容器
.container---固定宽度,并支持响应式布局
.container-fluid---100%宽度,占全部窗口
二、栅格系统
1、媒体查询
@media(min-width:@screen-sm-min){…}) //md lg 分别对应小、中、大屏幕
也可以包含max-width限定更准确些:
@media(max-width:@screen-xs-max){…}
@media(min-width: @screen-sm/md-min) and (max-width:@screen-sm/md-max){…}
@media(max-width:@screen-lg-max){…}
2、栅格参数
.col-xs- .col-sm- .col-md- .col-lg-
<=62px <=81px <=97px
例子:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
3、多余的列将另起一行排列
4、列偏移 .col-md-offset- 将列向右侧偏移。
5、嵌套列:row----col-xs-4----row---col-xs-2
6、列排序
.col-md-push-* 向右移动*列
.col-md-pull-* 向左移动*列
7、Less mixin和变量
三、排版
1、标题:标签<h1>~<h6>
.h1~.h6为了给行内元素赋予标题样式
<small>标签或 .small 类 ---副标题
2、页面主体:全局font-size:14px; line-height:1.428;
<p>margin-bottom:10px;
段落突出显示:.lead 类
3、使用Less工具构建:variables.css文件 @font-size-base @line-height-base
4、内联文本:<mark></mark>标签高亮
<del></del>被删除的文本
<s></s>无用文本
<ins>额外插入的文本</ins>
<u></u>带下划线的文本
<small></small>小号文本
强调文本<strong></strong> <em></em>
5、对齐
.text-left/center/right
.text-justify/nowrap
6、改变大小写------.text-lowercase/uppercase/capotalize
7、缩略语:<abbr title="attribute"></abbr>---基本
<abbr class="initialism"></abbr>---首字母缩略语(font-sizes稍微小些)
8、地址:每行末尾加<br>
9、引用:
<blockquote>-------引用样式
<p></p>-------直接引用
</blockquote>
10、列表:无序列表(ul、li)
有序列表(ol、li)
无样式列表(<ul class="list-unstyled">针对直接子元素)
内联列表(<ul class="list-inline"> display:inline-block;)
描述式短语列表(dl、dt、dd)---水平排列的描述(<dl class="dl-horizontal">)
11、自动截断:text-overflow属性
四、代码
1、内联代码 <code></code>
2、用户输入 <kbd></kbd>
3、代码块 <pre></pre>用于多行代码,注意尖括号要进行转义处理
<pre><p>Sample text here</p></pre>
4、变量 var
5、程序输出 <samp></samp>
五、表格
1、条纹状:<table class="table table-striped">…</table>(IE8不支持)
2、带边框的表格:<table class="table table-bordered">…</table>
3、鼠标悬停:<table class="table-hover"></table>
4、紧缩表格:<table class="table-condensed"></table>(使表格更紧凑,单元格中的内补padding都会减半)
5、状态类:为行或单元格设置颜色
.active(鼠标悬停的颜色) / .success(成功或积极的动作) /
.info(普通的提示信息或动作) / .warning / .danger
6、响应式表格:将.table包裹在.table-responsive元素内,会在小屏幕设备上水平滚动
<div class="table-responsive">
<table class="table"></table>
</div>
六、表单
1、基本实例
(1)所有设置了.form-control的input/select/textarea:width:100%;
(2)<div class="form-group">
<label for=""></label>
<表单控件放在这 class="form-control">
</div>
(3)不要将表单组和输入框组混合使用,建议将输入框组嵌套到表单组中
2、内联表单:
(1)<form class="form-line"></form>
(2)用在>=768px宽度,可以使多个控件在一行显示
(3)元素{width:auto;}
(4)要添加<label>标签,可<label class="sr-only"></label>将其隐藏
3、水平排列的表单
<form class="form-horizontal"></form>并配合使用栅格类,可将标签和控件组水平布局
如:<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" for="">邮箱:</label>
<div class="col-sm-10">
<input type="email" placeholder="Email" />
</div>
</div>
</form>
4、被支持的控件
(1)输入框:text、password、datetime、datetime-、local、date、month、time、week、number、email、url、search、tel、color(都必须设置type属性)
(2)文本域:textarea
(3)单选多选框:可设置disabled属性 如果联合使用的<label>也禁止点击,就把disabled类给.radio、.radio-inline(内联单选)、checkbox、checkbox-inline、<fieldset>
(4)下拉列表:同时显示多个选项----<select multiple class="form-control"></select>或使用默认选项
5、静态控件
纯文本和<label>同一行:<p class="form-control-static"></p>
6、焦点状态
7、禁用状态:
(1)<input type="text" disabled /> 防止输入并能改变外观
(2)<fieldset>设置disabled,<a>链接功能不受影响,但是IE中的<fieldset>不完全支持disabled属性
8、只读状态:<input type="text" readonly />
9、校验状态:
(1).has-warning .has-error .has-success
如果设置了上面的类,其中的.control-label、.form-control、.help-block都接受上面的样式
(2)添加额外图标
设置has-feedback类(必须是class="form-control")
为水平排列的表单和内联表单设置可选图标
如果<label class="sr-only"></label>,将会自动调整图标的位置
10、控件尺寸
(1).input-lg/sm-----高度 .col-lg-* 类似的类-----宽度
(2)水平排列的表单组的尺寸:外层div用.form-group-lg/sm 内层id="formGroupInputLarge/Small"
(3)列尺寸:col-xs-4
11、辅助文本
针对块级辅助文本:<span class="help-block"></span>
七、按钮
btn 样式 大小 块级 尽可能使用<button>元素
1、预定义样式
class="btn btn-default/primary/success/info/warning/danger/link"
2、尺寸
<button type="button: class="btn btn-primary btn-lg/sm/xs"></button>
.btn-block:100%宽度,变成块级元素
3、激活状态:button和a都可加 .active 类
4、禁用状态
<button disabled="disabled"></button>
<a class="btn btn-primary btn-lg disabled"></a>---兼容性问题
5、按钮类
type="submit/button"
八、图片
1、响应式图片:<img class="img-responsive" alt="" />
2、图片形状:<img class="img-rounded/circle/thumbnail" alt="" />
九、辅助类
1、Contextual colors:<p class="text-muted/primary/success/info/warning/danger"></p>
2、Contextual backgrounds:<p class="bg-primary/success/info/warning/danger"></p> 有时需放在带这种class的div里
3、关闭按钮:
<button type="button" class="close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
4、三角符号:使元素有下拉菜单功能
<span class="caret"></span>
5、快速浮动:
(1)<div class="pull-left"></div> <div class="pull-right"></div>
.pull-left{float:left !important;} .pull-right{float:right !important;}
.element{.pull-left();} .another-element{.pull-right();}
(2)在导航条中,使用.navbar-left .navbar-right
6、Center content blocks
<div class="center-block"></div>
.center-block{display:block; margin-left:auto; margin-right:auto;}
.element{.center-block();}
7、Clearfix
<div class="clearfix"></div>
.clearfix(){……}
8、Showing and hiding content
<div class="show/hidden"></div>
9、Screen reader content
<a class="sr-only sr-only-focusable" href="#"></a>联合使用,聚焦时显示
10、Image replacement
<h1 class="text-hide"></h1> 用背景图替换文字
十、响应式工具
1、可用的类
|
手机
|
平板
|
>=992px
|
>=1200px
|
.visible-xs/sm/md/lg-*
|
xs可见
|
sm可见
|
md可见
|
lg可见
|
.hidden-xs
|
|
可见 |
可见
|
可见
|
.hidden-sm
|
可见
|
|
可见
|
可见
|
.hidden-md
|
可见
|
可见
|
|
可见
|
.hidden-lg
|
可见
|
可见
|
可见
|
|
2、打印类(不建议使用)
.visible-print-block/inline/inline-block对打印机可见
.hidden-print对浏览器可见
3、测试用例
十一、使用Less
Bootstrap 的 CSS 文件是通过 Less 源码编译出来的。Less 是一门预处理语言,支持变量、mixin、函数等额外功能
十二、使用Sass
相关推荐
bootstrap3全局css样式中文文档,设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。
下面将详细介绍Bootstrap 3.3.6中关于全局CSS样式方面的知识点。 首先,Bootstrap的文档类型应该设置为HTML5,这是因为Bootstrap使用了某些只在HTML5中定义的元素和CSS属性。在文档的部分,开发者需要添加viewport...
本主题将深入探讨BootStrap全局CSS样式,帮助初学者从入门到实战,逐步掌握这一强大的工具。 首先,BootStrap的核心在于其响应式网格系统,这在描述中的“栅格系统示例2图片合集”中得到了体现。栅格系统是...
全局 CSS 样式 · Bootstrap v3 中文文档.htm
Bootstrap 初学者帮助文档 版本排版清晰一目了然便于阅读
全局 CSS 样式 · Bootstrap v3 中文文档.mhtml
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。
1. **bootstrap.min.css**:这是Bootstrap的最小化版本,包含了所有核心样式,适合生产环境使用,因为它已经过压缩,加载速度快。 2. **bootstrap.css**:非压缩版,便于开发者查看和调试代码,通常在开发阶段使用。...
`bootstrap.min.css`是Bootstrap的核心CSS文件,经过压缩和优化,用于引入框架的样式规则,包括栅格系统、排版、组件样式和全局CSS变量。这个最小化的版本减少了文件大小,加快了页面加载速度。 `bootstrap.bundle....
内容包括Bootstrap起步、Bootstrap全局css样式概览、Bootstrap全局css样式_栅格、Bootsrtap全局css样式_排版、Bootstrap全局css样式_代码、Bootstrap组件_字体图标、Bootstrap组件_按钮组等。 资源太大,传百度网盘...
"css样式初始化.zip"这个压缩包文件很可能包含了一组用于初始化CSS样式的代码,帮助开发者快速建立一个干净、一致的样式起点。初始化CSS样式的主要目的是消除浏览器之间的默认样式差异,确保在不同浏览器上呈现一致...
这套主题通常会包含自定义的CSS样式文件、JavaScript扩展和可能的图像资源,以重现Metro界面的视觉效果。 1. **自定义CSS**:在Bootstrap的默认样式上应用Win8 Metro主题,通常涉及更改颜色方案、字体样式和布局...
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。
菜鸟教程bootstrap参考手册,全局css样式3.37版本 摘要必须大于50个字节!
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。
首先,我们来看看“全局 CSS 样式”部分。这部分详细介绍了Bootstrap的基本样式规则,包括字体设置、颜色方案、排版、链接样式、图片处理、表格、按钮、表单元素等。Bootstrap的全局样式使得页面元素具有统一的视觉...
bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。