BootStrap基础知识

BootStrap是一个用于快速开发Web应用程序和网站的前端框架。

基于Html、CSS、JavaScript的。

所有主流的浏览器都支持BootStrap。

包含内容：BootStrap提供了一个带有网格系统、链接样式、背景的基本结构。

CSS：全局的css设置、定义基本的htlml元素样式、可扩展的class。

组件：包含了十几个可重用的组件。

JavaScript插件：BootStrap包含了十几个自定义的jquery插件。

BootStrap的组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

在BootStrap创建的网页开头使用html5的文档类型DOCTYPE。

移动设备优先是BootStrap的最显著的变化。

确保适当的绘制和触屏缩放，在HTML的head中添加viewport?meta标签。

<meta name="viewport"? content="width=device-width,initial-scale=1.0">

width设置为device-width可以确保它能正确呈现在不同设备上。

initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何缩放。

user-scalable=no可以禁用其缩放（zooming）功能。

maximum-scale=1.0与user-scale=no一起使用，禁用了缩放功能后，用户只能滚动屏幕。

响应式图像：<img src="" class="img-responsive" alt="响应式图像">。

响应式图像对响应式布局的支持更加友好

.img-responsive{

? ? ? ? ? ? display:block;

? ? ? ? ? ? height:auto;

? ? ? ? ? ? ?max-width:100%;

}

把display属性设置位block，以块级元素显示。

height：auto相关元素的高度取决于浏览器。

max-width：100%会重写任何通过width属性指定的宽度。

全局显示：BootStrap使用了body｛margin:0;｝来移除body的边距。

排版：使用@font-family-base、@font-size-base、@line-height-base

链接样式：@link-color设置全局链接的颜色? focus--->hover--->active

BootStrap使用Normalize来建立跨浏览器的一致性。

BootStrap3的container?calss用于包裹页面上的内容

.container{

padding-right:15px;

padding-left:15px;

margin-right:auto;

margin-left:auto;

}

container的左右?外边距（margin-right，margin-left）交由浏览器决定

由于内边框（padding）是固定宽度