BootStrap安装与使用
-
BootStrap介绍
官网:http://getbootstrap.com/
中文网:http://www.bootcss.com/
BootStrap 是一套现成的CSS样式集合。是两个推特员工干出来的
BootStrap 是很受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目
下载与使用
-
下载: http://v3.bootcss.com/getting-started
-
下载完毕后
-
下载jquery.js:http://jquery.com/
-
在html中模版为:
<!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
css使用说明
BootStrap 使用css是使用加类名的方式,控制样式的
布局容器和栅格网格系统
-
布局容器
.container 类用于固定宽度并支持响应式布局容器
.container-fluid 类 占据全部视口的容器
-
栅格网格系统
BootStrap 提供了一套响应式,移动设备设备优先的流式栅格系统
网格系统使用到的css:
container
row
col-md-4(xs,sm,md,lg)
-
列偏移:不希望两个列紧靠在一起
col-md-offset-8
-
列排序:改变浮动方向,设置浮动距离
col-md-push-*:往后
col-md-pull-*:往前
*代表移动列组合数
-
列嵌套:在列中在嵌套行
-
常用样式
-
排版
-
大标题:使用 <h1> 或 .h1
副标题: 使用 <small> 或 .small
-
段落
小字号: <small>
加粗:<b><strong>
斜体:<i><em>
-
强调
强调是通过颜色来表示的
-
对其效果
- .text-left
- .text-right
- .text-center
- .text-justyfy
-
列表
-
-
表格
- table
- 基础样式: .table
- 斑马线表格: .table-striped
- 带边框的表格: table-bordered
- 鼠标悬停高亮表格: table-hover
- 紧凑型表格: table-condensed
- tr,th,td
- 悬停应用在行或单元格上: .active
- 成功操作: .success
- 信息变化时操作:.info
- 警告操作:.warning
- 危险操作: .danger
-
表单
-
表单控件
.form-control .input-lg(较大) .input-sm(较小)
-
输入框
.form-control .input-lg(较大) .input-sm(较小)
-
下拉选择框
.form-control 多选:multiple=“multiple”
-
选择框
-
按钮
- 使用button实现
- 基础样式: .btn
- 其他样式: .btn-primary .btn-info .btn-warning .btn-danger .btn-link .btn-default
-
-
表单布局
-
-
-
面板
默认的 .panel 所做的只是设置基本的边框(border) 和 内补(padding)来包含内容
,panel-default
.panel-heading
.panel-body
一个简单的面板
-
-
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。