-
1-1bootstrap简介 （1）bootstrap是twitter公司开发基于HTML\CSS\javascript 的前端框架 （2）为实现web应用程序快速开发提供的一套前端工具包 （3）响应式布局 （4）移动设备优先 目标：1）bootstrap全局样式2）viewport的意义3）栅格化布局 4）字体、图标 5）实现响应式布局开发
查看全部 -
表格的样式
table table-striped table-bordered table-hover
表格信息样式
success
warning
info
danger
active
查看全部 -
表单
<button></button> // 或者用<a></a>标签
.btn Bootstrap基础按钮
.btn-default 默认按钮
,btn-primary 主要按钮
.btn-warning 警告按钮
.btn-info 信息按钮
.btn-success 成功按钮
.btn-danger 报错按钮
.btn-link 链接按钮
.btn-lg 大按钮
.btn-sm 小按钮
.active 默认选中
.btn-block 全屏按钮
.disabled 禁止按钮
查看全部 -
排版--文本
.text-left 内容左置
.text-center 内容居中
.text-right 内容右置
.text-lowercase 内容变成小写
.text-uppercase 内容变成大写
.text- capitalize 内容首字母变大写
查看全部 -
【bootstrap环境搭建】
1、必须的文件 bootstrap.min.css 、bootstrap.min.js 和 jquery
2、例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css" >
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]-->
</head>
<body>
<div class="text-center">
<h1>Hello World!</h1>
<button type="button" class="btn btn-primary btn-lg">我是按钮，按我一下！</button>
</div>
</body>
</html>
查看全部 -
带边框表格 .table-bordered
条纹状表格 .table-striped
悬停表格 .table-hover
紧凑风光 .table-condensed
查看全部 -
p标签：
默认：14px
行高：20px;
底部外边距：10px
<mark></mark>：高亮标记
<del></del>删除标记
<ins></ins>下横线标记
<small></small>缩小标记
class = "text-left":左对齐
class = "text-center":居中对齐
class = "text-right":右对齐
class = "text-lowercase":字母小写
class = "text-uppercase":字母大写
class = “text-captialize”:首字母大写
查看全部 -
解决苹果线条字体变粗的问题
查看全部 -
bootstrap字体图标的特点
-体积小便于加载
-无需重复设计
-方便引用
查看全部 -
em会继承父级元素的字体大小
1em=16px
IE的部分浏览器并不支持em
查看全部 -
栅格布局：二u荣跟随屏幕的大小自动调整。
查看全部 -
initial-scale网页放大倍数，maximum-scale，最大倍数，minimum-scale，最小倍数
查看全部 -
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。查看全部 -
测试。。。。
查看全部 -
bootstrap全局样式用法
viewport的意义
栅格化布局用法
字体，图标
实现响应式布局的开发
查看全部
举报