首页 > 代码库 > bootstrap
bootstrap
1.jquery要在Bootstrap之前引用
2.在之前对各个设备的宽度引用,viewport控制网页的大小和缩放。初始化移动浏览器的宽度(<meta name=”viewport” content=”width=device-width ,initial-scale=1”。
3.内容
Class
lead突出段落P
颜色
.text-muted:提示浅灰色
.text-primary主要蓝色
.text-success成功浅绿色
.text-info通知信息浅蓝色
.text-warrning警告 黄色
.text-danger危险 褐色
文本对齐方式
.text-left/right/justify(两端对齐)/center
列表去样式
.list-unstyle
还垂直列表到水平列表
.list-inline
定义列表dl{ dt{dd
代码
<code>一行代码
<pre>块代码 class .pre-scrollable 设置代码块的最大高度,340px.超过这个高度酒出现滚动条
<kbd>用户输入
表格的类型
.table基础表格
.table-striped 斑马线表格
.table-bordered带边框的表格
.table-hover鼠标悬停高亮的表格
.table-condensed紧凑型表格
.table-responsive响应式表格
Tr 对应类的颜色不同
.active表示当前活动
.success表示成功
.info表示中立
.warning表示警告
.danger危险或错误
表单
水平的表单 <form class=”form-horizontal”>
<div class=”form group”>
<lable for=”name” class=”col-sm-2”>姓名</lable>
<div class=”col-sm-10”>
<input type=”text” class=”form-control” id=”name” placeholder=”please input name “>
<div>
</div>
Form-control是焦点状态。即获得焦点时的状态 (输入都可用)
Disabled 与form-control同用表示不可用状态<fieldset /input/ disabled>
这是一个表单组
内敛表单 .form-inline 所有的表单在一行显示
复选框和单选按钮的水平排列 .checkbox-inline .radio-inline
Button 的样式 class=”btn btn-info/btn-success/btn-warning/btn-danger/btn-primary/btn-link.不仅在button中使用,在input和a中也可用
按钮的大小 .btn-xm .btn-sm .btn-lg
块状按钮,是按钮充满父元素.btn-block
按钮的禁用状态disabled
控件的大小 .input-lg大 .input-sm小
表单的验证 .has-warning .has-error .has-success 直接在form-group容器上对应添加状态名 has-feedback 状态名下添加对应的icon
表单的提示信息 <span class =”help-block”>信息错误</span>
Help-block表示在控件底部显示 help-inline在空间一行显示
img的状态
img-responsive:响应式图片;img-rounded:圆角图片;img-circle:圆形图片;img-thumbnail:缩略图片
图标
200 个icon
<span class="glyphicon glyphicon-search"></span>
glyphicon这个公司提供的图标
栅格网格
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
</div>
bootstrap