bootsrap学习文档.docVIP

HTML模板： !DOCTYPE html html head titleBootstrap 模板/title meta name=viewport content=width=device-width, initial-scale=1.0 !-- 引入 Bootstrap -- link href=css/bootstrap.min.css rel=stylesheet !-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -- !-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -- !--[if lt IE 9] script src=/libs/html5shiv/3.7.0/html5shiv.js/script script src=/libs/respond.js/1.3.0/respond.min.js/script ![endif]-- /head body h1Hello, world!/h1 !-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -- script src=/jquery.js/script !-- 包括所有已编译的插件 -- script src=js/bootstrap.min.js/script /body /html 快速引入文件：bootstrap CDN推荐 !-- 新 Bootstrap 核心 CSS 文件 -- link href=/libs/bootstrap/3.0.3/css/bootstrap.min.css rel=stylesheet !-- 可选的Bootstrap主题文件（一般不使用） -- script src=/libs/bootstrap/3.0.3/css/bootstrap-theme.min.css/script !-- jQuery文件。务必在bootstrap.min.js 之前引入 -- script src=/libs/jquery/2.0.0/jquery.min.js/script !-- 最新的 Bootstrap 核心 JavaScript 文件 -- script src=/libs/bootstrap/3.0.3/js/bootstrap.min.js/script Bootstrap 使用了一些HTML5和CSS，为了确保浏览器能正常显示，需要加入：!DOCTYPE html Bootstrap 移动设备优先，所以，需要先加入：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{ display:inline-block; max-width:100%; height:auto; } Container容器： .container:before, .container:after { display: table; content: ; } @media（min-width：@screen-sm-min）{...} 基本的网络结构： div class=container div class=row div class=col-*-*/div div class=col-*-*/div /div div class=row.../div /div 为了在大屏幕显示器上使用偏移，请使用?.col-md-offset-*?类。这些类会把一个列的左外边距（margin）增加?*?列，其中?*?范围是从?1到?11。 您可以很轻易地改变带有?.col-md-push-*?和?.col-md-pull-*?类的内置网格列的顺序，其中?*?范围是从?1?到?11。 内联子标题：如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 small，或者添加?.smal