一. bootstrap-全局css样式-栅格布局系统-重点难点
-
所有的行必须放在容器中.container或container-fluid
container：
screen>1200px(超大PC显示器-lg) 容器宽1170px screen>992px(普通PC显示器-md) 容器宽970px screen>768px(平板显示器-sm) 容器宽750px screen<768px(手机显示器-xs) 容器宽autocontainer-fluid:
width:auto+befor+after 分为多行，一行最多分为12列
网页内容只能放在列中，不能放到行中
可以在col中再嵌套row
col分为四大类 col-xs-i col-sm-i col-md-i col-lg-i， i值可以为1-12，值为某个列的宽度
可以为一个列指定不同屏幕下的宽度
col-lg-i 大PC
col-md-i 大PC 普通PC
col-sm-i 大PC 普通PC 平板
col-xs-i 大PC 普通PC 平板 手机hidden-lg 大PC
hidden-md 普通PC
hidden-sm 平板
hidden-xs 手机-
列的偏移问题
col-xs-offset-i 大PC 普通PC 平板 手机
col-sm-offset-i 大PC 普通PC 平板
col-md-offset-i 大PC 普通PC
col-lg-offset-i 大PC一行中放一列 一行中放多列 一个行中指定不同宽度的列 一个列中指定不同屏幕下的不同宽度 不同屏幕下列宽的有效范围
补充.
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样式-表单-重点难点
-
bootstrap中的表单分为三种
- 默认表单
<form> <div class="form-group"> <label class="control-label"></label> <input class="form-control"> <span class="help-control"></span> </div> //bootstrap指定：单选和双选按钮要放到label标签中 <div class="checkbox"> <label> <input type="checkbox">我接受本站的使用条款 </label> </div> </form>-
行内表单
给表单添加form-inline即可
水平表单
默认的栅格系统：container->row->col-*
默认的栅格系统：form-horizontal->form-group->col-*
三. bootstrap-组件-图标字体
1.glyphicons是一套收费的图标字体，提供了web/移动开发中常用的小图标
2. bootstrap中可以免费使用这套字体中的250+个，以服务器端字体形式出现的
3. 图标字体的本质不是图片，而是字体
4. glyphicon 图标字体只能用于空元素-不能包含任何内容或子元素；
5. 用法
<span class="glyphicon glyphicon-user"></span>
字体文件夹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结构
<div class="dropdown"> 相对定义的父元素
<a data-toggle="dropdown">触发元素</a>
<ul/div class="dropdown-menu">隐藏元素</ul/div> 绝对定位
</div>
2.
divider 分割线
dropdown-header 分类头
六. bootstrap-组件-导航 重点简单
-
标签页导航
<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li ><a href="#">Profile</a></li> <li ><a href="#">Messages</a></li></ul>
data-toggle="tab" 用于切换 -
胶囊式导航 用于ul
<ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li ><a href="#">Profile</a></li> <li ><a href="#">Messages</a></li></ul>
两端对其的导航 nav nav-tabs nav-justified
竖直放置的胶囊导航 nav nav-pills nav-stacked
