bootstrap

======================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();


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值