BootStrap

BootStrap安装与使用

BootStrap介绍

官网：http://getbootstrap.com/

中文网：http://www.bootcss.com/

BootStrap 是一套现成的CSS样式集合。是两个推特员工干出来的

BootStrap 是很受欢迎的HTML,CSS和JS框架，用于开发响应式布局，移动设备优先的WEB项目

下载与使用

下载： http://v3.bootcss.com/getting-started
下载完毕后
- 拷贝dist/css中的bootstrap.min.css到项目css中
- 拷贝dist/js中的bootstrap.min.js到项目中
下载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
- 段落
 
 小字号： 
 
 加粗：
 
 斜体：
- 强调
 强调是通过颜色来表示的
 - .text-muted:提示，使用浅灰色
 - .text-primary：主要，使用蓝色
 - .text-success:成功，使用浅绿色
 - .text-info:通知信息，使用浅蓝色
 - .text-warning:警告，使用黄色
 - .text-danger:危险，使用褐色
- 对其效果
 - .text-left
 - .text-right
 - .text-center
 - .text-justyfy
- 列表
 - 取点列表：.list-unstyled
 - 内联列表: .list-inline (把垂直列表变成水平列表，并且去掉符号)
 - 定义列表：dl-horizontal (制作水平定义列表：当标题宽度超过160px时，将会显示3个省略号)
- 代码
 - 单行代码格式： <code>
 - 快捷键代码: <kbd>
 - 多行代码格式: <pre>
- 表格
 - 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”
 - 选择框
 -单选框（直接设置在lable上）
 
 radio（垂直排列）
 radio-inline（水平排列）
 
 多选框（设置在lable的外层div上）
 
 check（垂直排列）
 check-inline（水平排列）
 - 按钮
 - 使用button实现
 基础样式： .btn
 其他样式： .btn-primary .btn-info .btn-warning .btn-danger .btn-link .btn-default
 - 使用普通标签实现（div ，a）
 
 直接加class 样式
 - 按钮大小
 
 .btn-lg
 
 .btn-sm
 
 .btn-xs
 - 按钮禁用
 
 通过disabled属性（真正禁用）
 通过disabled样式（形式禁用）
 - 表单布局
 - 基本规则
 向父 form 标签中添加 role=“form”
 把标签和控件放在一个带有class.form-group的div中
 向所有的文本元素input，textarea，select标签中添加class=“form-control”
 - 水平表单
 
 在form表单中class添加属性 form-horizontal
 - 内联表单
 
 表单内的（label）控件一行显示：在form表单中class添加属性 form-inline
 
 所以必须设置label
- 缩略图
 
 在列中下的一个div（包含其他内容）中设置class 属性为： thumbnail
- 面板
 
 默认的 .panel 所做的只是设置基本的边框（border）和内补（padding）来包含内容
 
 ,panel-default
 
 .panel-heading
 
 .panel-body
 
 一个简单的面板

BootStrap

BootStrap安装与使用

下载与使用

css使用说明

布局容器和栅格网格系统

常用样式

相关文章