<div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul class='thumbnails'> <li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片1' /></a><…

1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示: 2.给需要的元素添加一个容器,使其居中显示 <div class='container'> <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> </div&g…

代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar navbar-fixed-top:导航固定显示在顶部,对应的navbar-fixed-bottom:导航固定显示在页面底部 .brand:提示文字或者主题 .active:激活选中 .navbar-search:导航搜索 搜索表单: <form class='navbar-search'> &l…

列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编辑器</li> <li>TinyMCE编辑器</li> <li>Kindeditor编辑器</li> </ul> 如图: 有序列表: <ol> <li>Ueditor编辑器</li> <li>…

代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> <!-- 选项卡:通过BS的类来控制选项卡的样式 ?处可以换成以下几个类 .nav-tabs:如图1 .nav-pills:如图2 .nav-tabs nav-stacked:如图3 --> <ul class='nav ?'> <li class='active'><a…

代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> <div class='carousel slide' id='carousel1'> <div class='carousel-inner'> <div class='item active'> <img src='http://placehold.it/1246x360/…

<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如果用的a标签,href='#collapse1'--> <a href='#collapse1' class='btn btn-primary' data-toggle='collapse'>点击显示内容</a> <!--button标签中指向data-target='#c…

当鼠标点击在一个a连接上时,显示提示文字的效果 ----------------  tooltip <div class='container-fluid'> <h3 class='page-header'>Bootstrap 工具提示</h3> <p style='text-align:center;'><a href='#' rel='tooltip' title='http://www.taobao.com'>淘宝网</a>&l…

提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert alert-info: .alert alert-block: .alert alert-heading: 提示信息按钮: <a href='javascript:;' class='close' data-dismiss='alert'></a> 代码块: <div class=…

导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'>首页</a> <span class='divider'>></span></li> <li><a href='#'>餐厅列表</a> <span class='divider'>></sp…