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

导航格式1: <ul class="nav nav-tabs"> <li class="active"><a href="#">中国</a></li> <li><a href="#">美国</a></li> <li><a href="#">日本</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…

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…

<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…