Bootstrap学习(一)

来源:转载


Bootstrap
一、简介:

bootstrap,来自 Twitter,是目前很受欢迎的前端框架。


Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。


二、特点:

1.跨设备,跨浏览器


2.响应布局


3.提供的全面的组件


4.内置jquery插件


5.支持html5 css3


6.支持less动态样式


三、环境搭建:

现在稳定的是3的版本


1、下载方式:


打开网址http://http://v3.bootcss.com/点击下载


然后编写HTML时候引用


2、地址引用:


使用 BootCDN 提供的免费 CDN











四、快速入门
1、Bootstrap中的排版
(1)、标题

标题:(h1~h6/.h1~.h6)


副标题:(samll)


如下:


Hello, world!副标题


Hello, world!


Hello, world!


Hello, world!


Hello, world!

Hello, world!

Hello, world!
Hello, world!
Hello, world!
Hello, world!
Hello, world!
Hello, world!

显示效果:



(2)、对齐

左对齐


居中对齐


右对齐


显示效果:



(3)、大小写转换

HELLO


hello


hello worlk!


显示效果:


hello


HELLO


Hello Worlk!


(4)、表格









1
Anna


2
Debbie


3
John


4
Dlq


#Firstname

显示效果:


Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:



标签
描述



为表格添加基础样式。



表格标题行的容器元素(),用来标识表格列。



表格主体中的表格行的容器元素()。



一组出现在单行上的表格单元格的容器元素( 或 内使用。







.table
为任意
)。



默认的表格单元格。



特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在

关于表格存储内容的描述或总结。

表格类


下表样式可用于表格中:



描述 实例
添加基本样式 (只有横向分隔线)
尝试一下


.table-striped
在 内添加斑马线形式的条纹 ( IE8 不支持)
尝试一下


.table-bordered
为所有表格的单元格添加边框
尝试一下


.table-hover
在 内的任一行启用鼠标悬停状态
尝试一下


.table-condensed
让表格更加紧凑
尝试一下


联合使用所有表格类
尝试一下

,






.active
将悬停的颜色应用在行或者单元格上
尝试一下


.success
表示成功的操作
尝试一下


.info
表示信息变化的操作
尝试一下


.warning
表示一个警告的操作
尝试一下


.danger
表示一个危险的操作
尝试一下

代码:


和 类


下表的类可用于表格的行或者单元格:



描述 实例










产品1
23/11/2013
待发货

产品2
10/11/2013
发货中

产品3
20/10/2013
待确认

产品4
20/10/2013
已退货

上下文表格布局
产品付款日期状态

显示效果:


响应式表格


通过把任意的.table包在.table-responsiveclass 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。













产品1
23/11/2013
待发货

产品2
10/11/2013
发货中

产品3
20/10/2013
待确认

产品4
20/10/2013
已退货

响应式表格布局
产品 付款日期 状态


尝试一下


(5)、表单

表单布局:

垂直表单(默认)


内联表单:.form-inline


水平表单:.form-horizontal

垂直表单——显示效果:垂直布局的表单



内联表单——显示效果:向左对齐的,标签是并排的



水平表单——显示效果:水平布局的表单



支持的表单控件:


Bootstrap 支持最常见的表单控件,主要是input、textarea、checkbox、radio 和 select


输入框(text):








显示效果:



文本框(Textarea):