bootsrap的部分学习笔记
bootstrap基本概念: 用于快速开发web应用程序和网址的前端框架。基于html,css,javascript的
使用的好处:移动设备有限,版本3起,框架包含贯穿整个库的移动设备优先样式;浏览器支持,所有主流浏览器都支持bootstrap;好上手;响应式设计:bootstrap的响应式css能自适应台式、平板电脑和手机;为开发人员创建接口提供了一个简洁同意的解决方案;包含功能强大的内置组件,易于定制;提供基于web的定制;开源;
bootstrap包的内容
基本结构:自带网格系统、链接样式、背景结构。
css:自带特性,全局的css设置、定义基本的html元素样式、可扩展的class以及一个先进的网格系统。
组件:bootstrap包含十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等 。
javascript插件:bootstrap包含十几个自定义的jq插件。可以直接包含所有插件,可以一个个包含插件。
基本结构、css、组件、javascript插件。
网格系统,链接样式,背景。全局设置样式,定义基本元素样式,可扩展class及网格系统;
组件:十几个可重用组件,下拉框、导航、警告、弹出;
javascript插件:十几个自定义插件,可以直接使用,也可以单独引用
定制:定制bootstript组件、less变量、jq查看定制自己的版本
2.使用概况
css:完成bootstrap底层结构关键部分,web开发更好、更快、更健壮的最佳实践
H5文档类型(Doctype)
使用h5元素和css属性,为了让这些正常工作,需要使用h5文档类型
<!Doctype html>
<html></html>
在bootstrap创建网页不使用html5的文档类型doctype,可能会导致浏览器显示不一致,设置面临一些特定情境下的不一致,导致代码不能通过W3C标准验证
移动设备优先:bootstrap3最显著的变化。
早期版本,需要手动 引用另一个css才能使项目支持移动设备,2版本之前。
版本3,css默认支持移动设备。为了让bootstrap开发的网址对 移动设备优化,确保适当绘制和触屏缩放,需要在网页的head之中添加viewport 的meta标签。目的 ,增加对移动设备的友好度,提供适当绘制和触屏缩放。
width属性控制设备的宽度(content=“width=device-width,initial-scale=1.0”)device-width确保正确显示 在不同设备。inital-scale=1.0确保网页加载时,以1:1的比例显示,不会有任何缩放。
user-scalable=no 禁用缩放功能,用户只能滚动屏幕 ,让网站看起来更像,原生应用 。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
user-scalable=no">
响应式图像:
<img src="..." class="img-responsive" alt="响应式图像">
添加img-responsive class可以让bootstrap 3图像对响应式布局的更友好支持。
设置图像显示为block,当将display属性设置为block时,以块级元素显示。
设置height:auto,相关元素的高度取决于浏览器,设置max-width:100%会重写任何通过width属性指定的宽度。如果需要让使用.img-responsive类图片水平居中,需要使用center-block类。
全局显示、排版和链接
基本的全局显示
bootstrap3使用body{margin:0;} 移除body的边距
body{
font-family:"Helvetica Neue",Helvetica,Arial,scans-serif;
font-size:14px;
line-height:1.428571429;
color:#333333;
background-color:#ffffff;
}
设置默认样式,设置文本默认字体大小 ,默认行高度 ,设置默认文本颜色,设置默认背景颜色。
排版:使用@font-family-base、@font-size-base、@line-height-base属性作为排版样式(字体类型,字体大小,字体高度)
链接样式:通过@link-color设置全局链接的颜色。
a:hover,a:focus
避免跨浏览器的不一致:使用noramllize来建立浏览器的一致性。normalize.css样式文件提供html元素默认样式,提供更好的跨浏览器的一致性
容器(container)
<div class="container">
...
</div>
bootstrap 3的container class用于包裹页面上内容。
默认:内边距固定宽度、外边距自动,交由浏览器决定,内边距是固定宽度,默认情况下容器是不可嵌套的。
b3-申请响应的媒体查询,再不同的媒体查询阈值返回都为container设置了max-width,用于匹配网格系统@media(min-width:768px){.container{width:750px;}}
浏览器/设备支持
bootstrap可以在最新桌面系统和移动端浏览器中工作
旧的浏览器,可能无法很好支持。
网格系统-bootstrap
提供一套响应式、设备优先的流失网格系统,随着屏幕或者视口viewport,尺寸增加,系统会自动分成最多12列。
由一系列用于组织内容的相交的直线组成的结构。广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用html和css的方法。
移动端优先策略-内容:决定什么是最重要的。布局:设计更小的宽度。基础的css是移动设备优先,媒体查询是针对于平板、台式电脑。渐进增强,随着屏幕大小的增加而添加元素。
bootstrap网格系统grid system的工作原理:通过一系列包含内容的行和列来创建页面布局,行必须放置在.container class内,以便获得适当的对齐和内边框,alignment、padding。使用行来创建列的水平组。内容应该放置在列内,且唯有列是可以是行的直接子元素。预定义的网络类,比如,row和col-xs-s。都可以用于快速创建网格布局,less混合类可用于更多语义布局。列通过内边距padding来框架列之间的间隙。该内边距是通过rows上的外边距margin取负,表示第一列和最后一列的行偏移。网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相同列,则要是用三个。col-xs-4.
媒体查询:有条件的css规则。只适用于一些基于某些规则条件的css,如果满足就应用相应的样式。媒体查询-允许基于视口大小移动、显示并隐藏内容。min-width:@screen-sm-min(sm/md/lg/xs)xs<sm<md<lg
max-width 将css的影响限制在更小的范围屏幕大小之内。
网格选项-超小设备手机小于768ox、小型设备平板电脑大于等于768px,中型设备台式电脑大于992px,大型设备台式电脑大于1200px、
尺寸:px、rem、em
px像素,相对长度单位,相对于显示器分辨率而言的,相对。显示器分辨率的像素点
em 同样是相对长度单位,相对于当前对象内文本的字体尺寸。若是相对于当前对行内文本的字体尺寸未被人为设置,就是相对于浏览器默认字体尺寸。
rem 同样是相对尺寸单位,相对的目标是html根元素。
em、px、rem:都是相对长度单位,px:相对于屏幕分辨率;em是相对与当前行内文本的字体尺寸,未被定义时,相对于浏览器默认字体尺寸;rem是相对html根元素的尺寸。
vw代表视窗(viewport)的宽度为1%,如果视窗宽度为1000px,那么50vw=500px。相对于视窗宽度。1vw等于1%的视窗宽度。
vh代表窗口高度的百分比,如果视窗高度800px 那么50vh=400px。
em、rem、px、vh、vw。的区别及相同。
xs<sm<md<lg尺寸。
基本的网格结构:外部容器container《行row《列col
响应式的列重置:我们在小设备浏览时,无法确定网格显示位置。为了解决这个问题,我们使用.clearfix class和响应式实用工具解决。
响应式可见辅助class类:
visible-*可见的设备尺寸,hidden-*不可见的页面尺寸
visible/hidden-* (phone、tablet、desktop)
偏移列:偏移是一个用于更专业的布局的有用功能,它们可用更多列腾出更多的空间。如,.col-xs-*类不支持偏移,但是它们可以通过简单地通过使用一个空的单元格来实现该效果。
为了在大屏幕显示器上使用偏移,使用.col-md-offset-*类。这些类会把一个列的外边距margin增加*列,其中*范围是从1到11.
嵌套列:为了在内容中嵌套默认的网格,添加一个新的row,并在一个已有的.col-md-*列内添加一组.col-md-*列,被嵌套的行应该包含一组列,这组列个数不能超过12列。