BootStrap

Posted wzdnwyyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BootStrap相关的知识,希望对你有一定的参考价值。

0.基本概念
 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
1.传统固定布局:
 实现方法:用width和height指定宽高px值、以及float浮动
 缺点:有空白、且无法随浏览器窗口变化而调整大小和布局
2.百分比布局:
 实现方法:用width和height指定宽高%值,以及float浮动
 缺点:有空白 
3.Flex伸缩布局:
 实现方法:
  3.1.给容器元素设置display:flex属性
  3.2.通过给【项目】(容器内子元素)的flex属性,来设置项目比例。例如项目A的flex:1,项目B的flex:2,表示A与B的宽度为1:2
  3.3.flex-direction排列方向(主轴):
   row: 默认.把项目排列的主轴设置为水平方向,从左到右
   row-reverse: 水平方向,从右到左
   column: 垂直方向,从上到下
   column-reverse: 垂直方向,从下到上
  3.4.flex-wrap单行/多行:
   nowrap: 默认.不换行
   wrap: 换行
   wrap-reverse: 倒序换行
  3.5.justify-content主轴对齐方式:
   flex-start: 向主轴起始位置靠拢对齐
   flex-end: 向主轴结束位置靠拢对齐
   center: 主轴方向居中
   space-between: 两头对齐(中间空白)
   space-around: 平均分布(两头、中间空白)
  3.6.align-items侧轴对齐方式:
   flex-start: 向主轴起始位置靠拢对齐
   flex-end: 向主轴结束位置靠拢对齐
   center: 主轴方向居中兼
   baseline: 两头对齐(中间空白)
   stretch: 平均分布(两头、中间空白)
  
4.响应式布局方案:
 4.1.媒体类型:all、screen、print、tv、projection等
 4.2.引入媒体类型两种方式:
  @media print
   divheight:10px
 
  
  <link rel="stylesheet" href="style1.css" media="print"/>
 4.3.媒体特性
  max-width: 最大宽度
  min-width:  
  device-width: 设备屏幕输出宽度
  device-height: 设备屏幕输出高度
  width: 渲染界面宽度
  height: 渲染界面高度
  orientation: portrait横屏/landspace竖屏
  resolution: 分辨率
  color: 每种色彩字节数
  color-index: 色彩表中的色彩数
 4.4.媒体查询语法:
  @media [and/only/not] 媒体类型 and/only/not (媒体特性) 样式
  【举例】:
  1.样式用于电脑显示屏和屏幕宽度小于1200px的设备
  @media screen and (max-width:1200px)样式
  
  2.用于浏览器兼容。用于支持媒体类型(screen)却不识别媒体特性(max-width)的老浏览器
  <link rel="stylesheet" href="sty.css" media="only screen and (max-width:500px)"/>
  
  3.样式用于除打印机和屏幕小于1200px之外的所有设备
  @media not print and (max-width:120px)样式
5.响应式布局设计模式
 布局不变,
  内容挤压-拉伸
  换行-平铺
  增减内容
 布局改变
  模块位置变换
  模块展示方式改变
  模块数量改变
  
6.响应式布局两个前提:
 6.1.能自动调整布局(弹性布局)
 6.2.能自动感知设备大小

以上是关于BootStrap的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap

技术文章链接

前端框架

各框架插件记录

前端框架介绍

(转)bootstrap 学习总结