html 栅格表单,bootstrap-栅格布局系统-表单-组件

一. bootstrap-全局css样式-栅格布局系统-重点难点

1. 所有的行必须放在容器中.container或container-fluid

container

screen>1200px(超大PC显示器-lg) 容器宽1170px

screen>992px(普通PC显示器-md) 容器宽970px

screen>768px(平板显示器-sm) 容器宽750px

screen<768px(手机显示器-xs) 容器宽auto

container-fluid: width:auto+befor+after

2. 分为多行，一行最多分为12列

3. 网页内容只能放在列中，不能放到行中

4. 可以在col中再嵌套row

5. col分为四大类 col-xs-i col-sm-i col-md-i col-lg-i， i值可以为1-12，值为某个列的宽度

6. 可以为一个列指定不同屏幕下的宽度

7. col-lg-i 大PC

col-md-i 大PC 普通PC

col-sm-i 大PC 普通PC 平板

col-xs-i 大PC 普通PC 平板 手机

8. hidden-lg 大PC

hidden-md 普通PC

hidden-sm 平板

hidden-xs 手机

9. 列的偏移问题

col-xs-offset-i 大PC 普通PC 平板 手机

col-sm-offset-i 大PC 普通PC 平板

col-md-offset-i 大PC 普通PC

col-lg-offset-i 大PC

一行中放一列

一行中放多列

一个行中指定不同宽度的列

一个列中指定不同屏幕下的不同宽度

不同屏幕下列宽的有效范围

10. 使用栅格系统实现响应式布局

11.补充.

1) web开发页面布局可以采用的方式

1) 使用table做布局

简单不易出错，但加载效率低

2) HTML+CSS

加载速度快，灵活，不易控制

3)使用bootstrap提供的栅格(grid layout)布局系统

加载速度快，灵活，支持响应式功能，容易控制(有行和列的概念)

2) css相关知识

1) 如何解决父元素的第一个子元素margin-top越界问题

给父元素加border-top

给父元素指定padding-top

给父元素指定overflow:hidden

让该元素不是第一个子元素

为父元素添加前置内容生成-推荐使用

.parent:before {

content:" ";

display:table;

}

2) 如果解决所有子元素浮动后，父元素高度变为0，且影响后续元素

给父元素指定overflow:hidden

为父元素指定高度

为父元素添加后置内容生成-推荐使用

.parent:after {

content:"";

display:table;

clear:both;

}

3) bootstrap系统中容器的特点

宽度做了媒体查询

添加了前置和后置内容生成，可以防止子元素的越界,浮动影响

二. bootstrap-全局css样式-表单-重点难点

1. bootstrap中的表单分为三种

1) 默认表单

//bootstrap指定：单选和双选按钮要放到label标签中

我接受本站的使用条款

2) 行内表单

给表单添加form-inline即可

3) 水平表单

默认的栅格系统：container->row->col-*

默认的栅格系统：form-horizontal->form-group->col-*

三. bootstrap-组件-图标字体

1.glyphicons是一套收费的图标字体，提供了web/移动开发中常用的小图标

2. bootstrap中可以免费使用这套字体中的250+个，以服务器端字体形式出现的

3. 图标字体的本质不是图片，而是字体

4. glyphicon 图标字体只能用于空元素-不能包含任何内容或子元素；

5. 用法

字体文件夹fonts必须跟html文件同级

四. bootstrap-组件-按钮组

btn-group 水平按钮组

btn-group-vertical 竖直按钮组

btn-group btn-group-justified 水平且两端对齐的按钮组

btn-group-lg

btn-group-xm

btn-group-xs

五. bootstrap-组件-下拉菜单 重点简单

1. 必须html结构

相对定义的父元素

触发元素

• 隐藏元素

绝对定位

2.

divider 分割线

dropdown-header 分类头

六. bootstrap-组件-导航

1. 标签页导航

• Home
• Profile
• Messages

data-toggle="tab" 用于切换

2. 胶囊式导航 用于ul

• Home
• Profile
• Messages

3. 两端对其的导航 nav nav-tabs nav-justified

4. 竖直放置的胶囊导航 nav nav-pills nav-stacked