BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅在 PC电脑显示 我们来看下面这个例子: <div class="container"> <div class="row"> <div class="span4"> <h1 class="page-…

概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @media(min-width:767px){body(background:red)} /*当浏览器宽度小于767px的时候采用 */ @media(max-width:767px){body(background:red} /*当浏览器宽度大约767px小于960px的时候采用 */ @media(min-wid…

先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class="thumbnail pull-right"> <img src="20224543-5aa37207bf894b479319fea51f210ae3.jpg" alt="小熊猫"/> <div class="cap…

缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""/></a></li> <li class="spa…

代码: <div class="alert alert-block" id="alert"> <a href="#" class="close" data-dismiss="alert">×</a> <h4>提示</h4> <small> 中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族…

导航路径 代码: <ul class="breadcrumb"> <li><a href="#">Home</a><span class="divider">></span></li> <li class="active">Product List</li> </ul> 效果: 分页器 代码: <…

代码: <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">中国</a></li> <li><a href="#tab2" data-toggle="tab">美国</a></li&…

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">Logo</a> <div class="nav-collapse col…

普通按钮 代码: <div style="margin-bottom:15px"> <a href="#" class="">a标签</a> </div> <div style="margin-bottom:15px"> <button class="">button标签</button> </div> <…

<form method="" action="" class="form-horizontal"> <frameset> <div class="control-group"> <label class="control-label" for="tb_userName">UserName:</label> <div cl…