java 28_java28

一、Bootstrap

1.特点:

1、简洁、直观、强悍的前端开发框架，html、css、javascript 工具集，让

web 开发更迅速、简单。

2、基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，

卓越的兼容性，响应式设计，12 列格网，样式向导文档。

3、自定义 JQuery 插件，完整的类库，bootstrap3 基于 Less，bootstrap4

基于 Sass 的 CSS 预处理技术

4 、Bootstrap 响应式布局设计, 让一个网站可以兼容不同分辨率的设备。

Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。

5、丰富的组件

2、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们

提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器

类不能互相嵌套。

1、.container 类用于固定宽度并支持响应式布局的容器。

...

2、.container-fluid 类用于 100% 宽度，占据全部视口(viewport)的容

器。

...

3、栅格网格系统(Grid System)

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多 12 列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是将容器平分成 12 份。

注意: 网格系统必须使用到 css

container 、row 、xs (xsmall phones), sm (small tablets), md (middle desktops) lg (larger desktops) 即: 超小屏( 自动) ，小屏(750px)，中屏(970px)和大屏(1170px) 数据行(.row)必须包含在容器(.container)中，以便为其赋予合适的对齐方式和内距(padding)。在行(.row)中可以添加列(.column), 只有列(column)才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于 12,则自动换到下一行。

具体内容应当放置在列容器(column)之内

4 列

8 列

4.表格

(1)样式:

Bootstrap 为表格提供了 1 种基础样式和 4 种附加样式以及 1 个支持响应式的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：

基础样式

1).table：基础表格 附加样式

1) .table-striped：斑马线表格

2) .table-bordered：带边框的表格

3) .table-hover：鼠标悬停高亮的表格

4). table-condensed：紧凑型表格，单元格没内距或者内距较其表格的内距更小

(2)

提供了五种不同的类名，每种类名控制了行的不同背景颜色

5.表单控件

.form-control .input-lg(较大) .input-sm(较小)

(1)输入框

.form-control

(2)下拉选择框 select

多行选择设置：multiple="multiple"

(3)文本域 textarea

(4)复选框 checkbox

.checkbox，水平显示：.checkbox-inline

(5)单选择按钮

.radio， 水平显示：.radio-inline

(6)按钮

1)使用 button 实现

基础样式: btn

附加样式：btn-primary btn-info btn-success btn-warning

btn-danger btn-link btn-default

2)多标签支持:使用 a div 等制作按钮

3)按钮大小

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

4)按钮禁用

方法 1：在标签中添加 disabled 属性

方法 2：在元素标签中添加类名“disabled”

在 class 属性中添加 disabled 只是样式上禁用了，并不是真正的禁用了此按钮！