======================bootstrap知识点================================
引入css文件夹<>
引入jquery
引进js
bootstrap布局容器:<div class="container">固定宽度1170px
container-fluid表示100%
排版的标签:
<h1 class="page-header"></h1> .page-header设置页头,加条线
<small></small>副标题,小一号
<big>副标题,大一号
<strong></strong>加粗
<em></em>倾斜
<del></del>删除线
文本对齐方式:
.text-center
.text-right
字母:
.text-lowercase
.text-uppercase
.text-capitalize首字母大写
列表:
.list-unstyled 去掉列表前面的符号
.list-inline 变成横向
自定义列表:
.dl-horizontal变成横向
<dl class="dl-horizontal">
<dt>标题</dt>
<dd>标题解释</dd>
</dl>
表格:在table标签中
.table加上表格基类样式
.table-bordered 加上外边框
.table-hover 鼠标悬停效果
.table-striped 隔行换色(斑马线效果)
.table-condensed 表格变紧凑
.table-responsive 给table的父元素加,在移动设备中屏幕太小的话有滚动条
在tr td中,.active .danger .info 表示的颜色各不相同
图片:
.img-responsive响应式图片
.img-circle 把图片变成椭圆形
.img-rounded 圆角矩形
.img-thumbnail 给图片加圆角的边框
栅格系统:一定要放在容器中,浏览器窗口自动分配最多12列。 行.row 列.col-md-1:表示占一列 col-md-2 表示占2列.....
<style>
div[class*="col-"]{
border:1px solid gray;
}
</style> 如果div包含.col-就增加这样的css效果
<head>
<meta name ="viewport" content="width=device-width,inital-scal=1,user-scalable=no">
</head> 屏幕的宽度和设备的宽度一致,初始缩放为1:1,禁止用户缩放
.col-md-offset-n 向右偏移n个列
排序:
语法——.col-md-pull-n 向左移动
.col-md-push-n 向右移动
辅助样式:
情景文本颜色—— .text-muted .text-primary .text-success 、、、、
背景文本颜色 .bg-success
下拉三角 <span class=".caret">
快速浮动 .pull-left .pull-right
清除浮动 .clearfix 给父盒子加
<div class="form-group">分组
.disabled 禁止选中
.form-control给输入框<textarea><input>加,变成圆角的输入框
.checkbox-inline 给label 标签加
输入框组
.form-horizontal 加在form标签上响应式
按钮:
.btn 是样式按钮的基类
==============js======================
创建数组 var cars = new Array();