前端开发框架bootstrap基础知识总结

bootstrap

一，概念：

1. 是一个简单，灵活的用于搭建web页面的html,css,javascript工具集
2. 在其官网上下载：www.getbootstrap.com
3. 它与h5相适应，即bootstrap是写在h5当中
4. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>窗口为可视化窗口，其宽度为设备的物理宽度，缩放比例为1，即不缩放
5. 一般在使用bootstrap时，要加载其对应的文件css样式文件，js文件，和一些字体设置

二，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>