您的位置：首页 > Web前端 > BootStrap

Bootstrap_第二章 Bootstrap样式

2020-07-13 05:56 323 查看

2.1.2 文件结构

在使用Bootstrap之前需要下载他的文件,可以登录官网www.getbootstrap.com下载Bootstrap框架的文件和源码.
Downnload Bootstrap.从该链接下载的内容是编译后可以直接使用的文件.
Download source.从该链接下载的是用于编译css的Less源码,以及各个插件的JS源码文件.
Download Sass.从该链接下载的是用于编译CSS的Sass源码.

2.1.3HTML标准模板

<head>
<meta charset="utf-8" />
<title>Bootstrap 基本模块</title>
<meta name="viewport"
content="width=device-width,user-scalabe=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>
<!--Bootstrap的CSS文件-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

<!--如果要使用Bootstrap的JS插件,必须引入JQuery-->
<script src="js/jquery-2.1.1.js"></script>
<!--  Bootstrap的JS插件-->
<script src="js/bootstrap.js"></script>
</head>

2.1.4 Bootstrap整体架构

1.CSS 12栅格系统
栅格是以规则的网格列阵来指导和规范网页中的版面布局以及信息的分布.
12栅格系统是整个Bootstrap的核心功能,也是响应式设计核心的一个实现形式
2.基础布局组件
在12栅格系统的基础上,Bootstrap提供了多种基础布局组件,如排版,代码,表单按钮等.
3.JQuery
Bootstrap所有的JavaScript插件都是依赖于JQuery1.10+,如果要使用这些插件,就必须用到jQuery库.
4.响应式设计
页面的设计开发应当根据用户行为以及设备环境进行想应的响应和调整.
5.CSS组件
在最新的3.x版本里提供了20种CSS组件
6.JavaScript插件
JavaScript插件总共有12种.

2.2.2 栅格系统的实现原理

栅格系统的主要工作原理:
一行数据(row)必须包含在.container或.container-fluid中,以便为其赋予合适的对齐方式和内边距.
使用(row)在水平方向创建一组列.
具体内容应当放置于列(column)内,而且只有列可以作为行的直接子元素
内置一大堆样式,可以使用.row和.col-xs-4这样的样式来快速创建栅格布局
通过设置padding创建列之间的间隙.
栅格系统中的列式通过定制1~12的值来表示其跨越范围.

2.2.3 栅格系统的使用

1.列组合

<div class="container">
<div class="row">
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格1</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格2</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格3</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格4</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格5</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格6</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格7</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格8</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格9</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格10</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格11</div>
<div class="col-md-1 col-sm-1 col-lg-1 col-xs-1">单元格12</div>
</div>
<div class="row">
<div class="col-md-4">单元格1</div>
<div class="col-md-4">单元格2</div>
<div class="col-md-4">单元格3</div>
</div>
</div>

2.列偏移

<div class="row">
<div class="col-md-3">单元格1</div>
<div class="col-md-3 col-md-offset-3">单元格2</div>
<div class="col-md-3">单元格3</div>
</div>

3.列嵌套

<div class="container">
<div class="row">
<div class="col-md-9 row">
<div class="col-md-6">单元格1中的子单元格</div>
<div class="col-md-6">单元格2中的子单元格</div>
</div>
<div class="col-md-3">单元格2</div>
</div>
</div>

4.列排序

<div class="row">
<div class="col-md-9 col-md-push-3">单元格1</div>
<div class="col-md-3 col-md-pull-9">单元格2</div>
</div>

2.2.4 响应式栅格

Bootstrap栅格参数

Bootstrap栅格参数	超小屏幕手机(<769px)	小屏幕平板(>=768px)	小屏幕平板(>=992px)	小屏幕平板(>=1200px)
栅格系统行为	总是水平排列	开始是堆在一起的,当大于这些阈值时将改变为水平排列
.container最大宽度	None(自动)	750px	970px	1170px
类前缀	col-xs	.clo-sm-	.col-md-	.col-lg-
列数	12
最大列宽	自动	~62px	~81px	~97px
槽宽	30px(每列左右均为150px)
可嵌套	是
偏移	是
列排序	是

2.3.1基础排版

1.标题
Bootstrap为传统的标题h1~h6重新定义了标准的样式

<span class="h1">标题</span>

2.页面主体

<p class="lead">这是一个p标签</p>

3.强调文本
Bootstrap将默认的文本强调元素进行了轻量级实现,这些元素分别为small.strong.em等.

<p class="text-center">这是一个p标签</p>

4.列表
(1)内联列表
由于网页中很多时候使用的列表都是横向的,因此Bootstrap就封装了这个特性.

<ul class="list-inline">
<li>首页</li>
<li>岗位课</li>
</ul>

(2)水平定义列表
Bootstrap提供了一个dl-horizontal样式.

<dl class="dl-horizontal">
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>配送方式</dd>
</dl>

2.3.2表单

<form action="#" method="post">
<div class="form-group">
姓名:<input type="text" class="form-control"/>
</div>
<div class="form-group">
邮箱:<input type="email" class="form-control"/>
</div>
<input type="submit" class="form-control" value="提交"/>
</form>

1.内联表单

<form action="#" class="form-inline"></form>

2.横向表单

<form action="#" class="form-horizontal"></form>

3.验证提示状态

Bootstrap提供了.has-warning  .has-error  .has-success三种样式分别表示警告,错误,成功

4.控件大小

<input type="text" class="input-lg form-control">
<input type="text" class="input-sm form-control">

2.3.3按钮

1.按钮样式

<input type="button" class="btn btn-default"/>灰色
<input type="button" class="btn btn-primary"/>深蓝色
<input type="button" class="btn btn-success"/>绿色
<input type="button" class="btn btn-info"/>天蓝色
<input type="button" class="btn btn-warning"/>黄色
<input type="button" class="btn btn-danger"/>红色
<input type="button" class="btn btn-link"/>链接

2.按钮大小

<input type="button" class="btn btn-default btn-lg"/>灰色
<input type="button" class="btn btn-primary btn-sm"/>深蓝色
<input type="button" class="btn btn-success btn-xs"/>绿色

2.3.4图片

1.响应式图片

<img src="..." class="img-responsive"/>

2.图片形状

<img src="..." class="img-rounded"/>圆角
<img src="..." class="img-circle"/>圆形
<img src="..." class="img-thumbnail"/>圆角边框

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航