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…

在BoootStrap2的版本中采用的布局方式是12栏网格布局(把浏览器的Width分12栏,布局中使用每个元素所占格数的不同来达到各种布局),包括(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).固定网格布局. <1>固定网格布局——通过span+数字组合来确定占用网格数 (如:span1就是一栏依此类推) 例1代码: <section id="grid-system"> <div class="c…

<div id="carousel1" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/940x360/&text=Picture-1"/> <div class="c…

先看效果: Code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-pare…

<p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用汉语.中国疆域内的各个民族统称为中华民族,龙是中华民族的象征." rel="tooltip">中国</a></p> <p><a href="#" id="k" title="中国(C…

先看看效果: 代码: <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> 效果: 分页器 代码: <…