bootstrap是一个前端css框架,由twitter公司开发。它简洁、直观、漂亮,特点之一是能够根据不同尺寸的设备(如手机、平板、笔记本与台式机的显示器尺寸不一)来响应式地布局,背后原理是css的媒体查询功能。
响应式
实现响应式布局的<meta>标签:
<!-- Bootstrap 根据屏幕大小自适应样式 --> <meta name="viewport" content="width=device-width,initial-scale=1">图片也可响应式处理:
<img class="img-responsive" src="../pictures/meChild.jpg" />
表格也可响应式处理:
通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。
栅格布局的响应式:
<div class="saying col-md-5 col-md-offset-7 col-xs-10 col-xs-offset-2">——心中有高考,年年可高考</div>小屏设备上,col-xs-10 col-xs-offset-2起作用, col-md-5 col-md-offset-7不起作用。中等屏幕设备上则反之。
引用
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
栅格化
屏幕的宽度被等分为12份。注意.class必须放在.row内。
<!-- 若一个元素想占2个宽度,并且往右偏移10个宽度--> <div class="row"> <div class="col-md-2 col-md-offset-10"></div> </div>