bootsrtap (-)
1、text-muted:提示,使用浅灰色(#999).text-primary:主要,使用蓝色(#428bca).text-success:成功,使用浅绿色(#3c763d).text-info:通知信息,使用浅蓝色(#31708f).text-warning:警告,使用黄色(#8a6d3b).text-danger:危险,使用褐色(#a94442)
2、文本对齐风格:.text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐(用于段落)。
3、定义列表:
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
4、
无序列表ul 加 .list-unstyled 去点。 内联样式:.list-inline {padding-left: 0;margin-left: -5px;list-style: none;}
.list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}
5、pre<pre>元素一般用于显示大块的代码,并保证原有格式不变。
.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
6、表单控件(文本域textarea) <textarea class="form-control" rows="3"> </textarea>
7、在Bootstrap框架中同样提供这几种效果。1、.has-warning:警告状态(黄色)2、.has-error:错误状态(红色)3、.has-success:成功状态(绿色)使用的时候只需要在form-group容器上对应添加状态类名。
8、图像 1、img-responsive:响应式图片,主要针对于响应式设计2、img-rounded:圆角图片3、img-circle:圆形图片4、img-thumbnail:缩略图片
9、按钮下拉菜单基本用法:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
…
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
10、导航:水平导航 .nav-tabs 胶囊导航.nav-pills 垂直导航:nav-stacked 自适应导航 nav nav-tabs nav-justified
11、导航条(navbar)第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”
12、分页导航
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
翻页分页导航
<ul class="pager">
<li><a href="#">«上一页</a></li>
<li><a href="#">下一页»</a></li>
</ul>
12.进度条:
<h2>基本进度条</h2>
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>
<h2>动态条纹进度条</h2>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<h5>层叠条纹进度条</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<h2>带Label的进度条</h2>
<h5>进度条1</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
媒体对象
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src=" " alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media Header</h4>
<div>…</div>
</div>
</li>
<li class="media">…</li>
<li class="media">…</li>
</ul>
bootsrtap (-)的更多相关文章
- 20个经典bootsrtap后台html站点模板推荐
今天为大家推荐20款不同风格的Bootstrap后台管理模板,每一款都经典可用,能预览和下载,保证让你挑得眼花缭乱. 1,Simpli flag蓝色 Simpli Flat蓝色管理模板是一款採用Fla ...
- 20个经典bootsrtap后台html网站模板推荐
今天为大家推荐20款不同风格的Bootstrap后台管理模板,每一款都经典可用,能预览和下载,保证让你挑得眼花缭乱. 1,Simpli flag蓝色 Simpli Flat蓝色管理模板是一款采用Fla ...
- bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...
- EasyUI+bootsrtap混合前端框架
EasyUI+bootsrtap混合前端框架 http://www.jeasyui.com/download/index.php用户没有登录前浏览的页面用bootsrtap框架用户登录进去后的商家管理 ...
- thinkphp标签实现bootsrtap轮播carousel实例
thinkphp标签实现bootsrtap轮播carousel实例由于轮播carousel第一个div需要设置active样式才能正常显示,上面的圆点也同样需要数字,使用volist标签在循环的同时可 ...
- Bootsrtap表单
前面的话 表单是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都 ...
- bootsrtap带表格面板内容居中
css中,添加 .table th, .table td { text-align: center; vertical-align: middle!important;}
- Bootsrtap 面包屑导航(Breadcrums)
Bootstrap面包屑导航是一种基于网站层次信息显示的方式.以博客为例,面包屑导航可以显示发布日期,类别或标签,它们表示当前页面在导航层次结构内的位置. Bootstrap面包屑导航其实是一个简单的 ...
- Bootstrap 快速人门案例——前端最火的插件
今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更 ...
随机推荐
- Android学习----Android Studio 技巧汇总
关于快捷键 The File Structure Popup ctrl+f12此快捷键可以调出当前文件的大纲,并通过模糊匹配快速跳转至指定的方法.勾选上“show anonymous classes” ...
- C# 多线程编程 ThreadStart ParameterizedThreadStart
原文地址:http://club.topsage.com/thread-657023-1-1.html 在实例化Thread的实例,需要提供一个委托,在实例化这个委托时所用到的参数是线程将来启动时要运 ...
- Linux 搭建php扩展开发框架
1.安装phpize(如果是使用php源码编译就免了,本身就有) 2.打开php源码,ext中有ext_skel工具,使用它可以方便 ./ext_skel --extname = myext 生成扩展 ...
- MongoDB-GRIDFS大文件系统
gridfs 是一种在mongodb中存储大二进制文件的机制,使用gridfs的原因: 1.存储巨大的文件(视频图片). 2.利用GRIDFS可以简化需求. 3.GRIDFS 利用已经建立起来的复制以 ...
- [Struts2学习笔记] -- 输入校验
Struts2可以对客户端的输入进行校验,通过重写ActionSupport的validate方法来实现,具体如下: 首先通过用struts标签库创建一个form表单,表单中控件的name与actio ...
- 使用Gson进行json数据转换(list to json 和json to list)
文章借鉴自:http://blog.csdn.net/binyao02123202/article/details/7540407 下面是一个简单的例子: Java代码 public class Pe ...
- 玩死人不偿命的CLOUDSTACK
玩过CLOUDSTACK(CS)的人,一定不会陌生下面的LOG: 2013-12-27 18:26:43,861 DEBUG [allocator.impl.FirstFitAllocator] (J ...
- 查看堵塞的SQL
SELECT r.trx_id waiting_trx_id, r.trx_mysql_thread_id waiting_thread, r.trx_query waiting_query, b.t ...
- 【HDOJ】4982 Goffi and Squary Partition
题意就是整数划分,选出和为n的K个整数,其中K-1个数的和为完全平方数S.选择整数时需要从1,2,3..连续选择,当选择整数与n-S相等时,需要跳过n-S,即选择n-S+1.如此选择K-2个数,从而可 ...
- BZOJ 1007 [HNOI2008]水平可见直线
1007: [HNOI2008]水平可见直线 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 4453 Solved: 1636[Submit][Sta ...