bootstrap
一,概念:
二,bootstrap CSS:
一些基本用法:
1, 文本:
加粗:<b> <strong>
强调内容:.lead
斜体:<em> <i>
强调相关的类:
.text-muted:提示,使用浅灰色
.text-primary:主要,使用蓝色
.text-success:成功,使用浅绿色
.text-info:通知信息,使用浅蓝色
.text-warning:警告,使用黄色
.text-danger:危险,使用褐色
文本对齐方式:
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐 .
.text-justify:两端对齐
2,列表
去点:list-unstyled 块变行:list-inline
3,代码:
<code></code>单行内联代码
<pre></pre>多行块代码,超出340px时,出现滚动条
<kbd></kbd>用户输入代码 即从键盘上输入内容
4,表格
table.table—-基础表格
.table-striped—-斑马线表格
.table-bordered—-带边框的表格
.table-hover—-鼠标悬停高亮的表格
.table-condensed—-紧凑型表格
.table-responsive—-响应式表格
5,表单
a, 如何实现水平表单效果:
在<form>元素是使用类名“form-horizontal”。
配合Bootstrap框架的网格系统。
b, 在<form>元素上使用类名“form-horizontal”主要有以下几个作用:
设置表单控件padding和margin值。
改变“form-group”的表现形式,类似于网格系统的“row”。
c,表单高度处理:
input-lg(大) input-sm(小) input-xs(超小)
d,表单宽度处理:
col-xs-*(*表示数字) col-sm-* col-lg-*
e,内联表单的实现:即让其显示在一行上
form.form-inline>div.form-group>label.col-sm-xx>input.form-control
f,下拉框和多选框的实现:
form[role=’form’]>div.form-group>select/(textarea).form-control
g,各种按钮:
btn —普通按钮 btn-success btn-info btn-warning btn-danger btn-link
按钮的大小:
btn-lg btn-sm btn-xs 不写为正常
块状按钮:btn-block 将其充满整个容器
禁用:disabled
6,图片
img.img-responsive//响应式图片,主要针对于响应式设计
img.img-rounded//圆角图片
img.img-circle//圆形图片
img.img-thumbnail//缩略图片
7,网格系统
工作原理:
第一步:数据行(row)必须包含在容器(container)内,
<div class=”container”>
<div class=”row”></div>
</div>
第二步:在行中可以添加列,但列数之和不能超过12
<div class=”container”>
<div class=”row”>
<div class=”col-md-4″></div>
<div class=”col-md-8″></div>
</div>
</div>
编程知识库是国内专业的网站建设资源编程技术学习类网站