强调class

这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

  1. <p class="text-muted">...</p>
  2. <p class="text-primary">...</p>
  3. <p class="text-success">...</p>
  4. <p class="text-info">...</p>
  5. <p class="text-warning">...</p>
  6. <p class="text-danger">...</p>

缩略语

鼠标悬停后会显示所有内容,但是要包含title属性

  1. <abbr title="attribute">attr</abbr>

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。

  1. <address>
  2. <strong>Twitter, Inc.</strong><br>
  3. 795 Folsom Ave, Suite 600<br>
  4. San Francisco, CA 94107<br>
  5. <abbr title="Phone">P:</abbr> (123) 456-7890
  6. </address>

内联列表

通过设置display: inline-block;并添加少量的内补,将所有元素放置于同一列。等同于float:left

  1. <ul class="list-inline">
  2. <li>...</li>
  3. </ul>

关闭按钮

通过使用一个象征关闭的图标,可以用来让模式对话框和警告框消失。

  1. <div id="box" style="width: 300px; height: 200px; border: 1px solid black;">
  2. <button type="button" class="close" aria-hidden="true">&times;</button>
  3. </div>

插入的叉叉按钮会显示在父级DIV的右上角

Carets

显示的是下拉框按钮的下拉小三角形

  1. <span class="caret"></span>

导航条的几种样式

  导航条的使用是建立在<ul class="nav">标签上的,nav属性是定义成为导航的基本属性,有以下几种样式

  1.nav nav-justified

    这种导航条会将父级容器(ul)的宽度用LI标签平铺,假设父级是width:1000px;有5个li标签,那每个li标签自适应获得200px的宽度

  2.nav nav-tabs

    这是一种标签式导航条,需要在第一个li标签加上class="active"的属性

    

  3.nav nav-pills

    胶囊式导航,与上一个同样,需要在第一个li标签下加class="active"属性

    

Bootstrap学习笔记(未整理)的更多相关文章

  1. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  2. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  3. iOS学习笔记-精华整理

    iOS学习笔记总结整理 一.内存管理情况 1- autorelease,当用户的代码在持续运行时,自动释放池是不会被销毁的,这段时间内用户可以安全地使用自动释放的对象.当用户的代码运行告一段 落,开始 ...

  4. iOS学习笔记总结整理

    来源:http://mobile.51cto.com/iphone-386851_all.htm 学习IOS开发这对于一个初学者来说,是一件非常挠头的事情.其实学习IOS开发无外乎平时的积累与总结.下 ...

  5. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  6. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  7. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  8. java学习笔记系列整理说明

    java学习笔记系列整理说明 ​ 陆陆续续也巩固学习java基础也有一段时间了,这里整理了一些我认为比较的重要的知识点,供自己或者读者以后回顾和学习.这是一个学习笔记系列,有自己的整理重新撰写的部分, ...

  9. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

随机推荐

  1. Mediawiki.org的PHP编码约定

    http://www.mediawiki.org/wiki/Manual:Coding_conventions/PHP assignment作为expression来用看起来像个错误(looks su ...

  2. 关于一个小bug的修正

    python初学者,非常喜欢虫师的文章. 练习时发现一个小bug,http://www.cnblogs.com/fnng/p/3782515.html 验证邮箱格式一题中,第三个x不允许有数字,但是测 ...

  3. Kafka笔记--参数说明及Demo

    参考资料:http://blog.csdn.net/honglei915/article/details/37563647参数说明:http://ju.outofmemory.cn/entry/119 ...

  4. MongoDB学习笔记--基本命令

    转自:http://www.cnblogs.com/xusir/archive/2012/12/24/2830957.html 数据库文件默认位置 /var/lib/mongodb 成功启动Mongo ...

  5. vim 折叠代码技巧汇总

    以下命令输入的方式: 如zo命令,先按z键,松开后按o键即可展开折叠. 一.打开.关闭折叠 zo 展开折叠,只展开最外层的折叠. zO 对所在范围内所有嵌套的折叠点展开,包括嵌套折叠. zc 折叠,只 ...

  6. 简述TVS是的命名和封装

    1. 瞬态抑制二极管简称TVS (Transient Voltage Suppressor ),TVS的电气特性由P-N结面积,参杂浓度及晶片阻质决定的.其耐突波电流的能力与其P-N结面积成正比. 特 ...

  7. iptables 添加,删除,查看,修改

      iptables是linux系统自带的防火墙,功能强大,学习起来需要一段时间,下面是一些习iptables的时候的记录.如果iptables不熟悉的话可以用apf,是一款基于iptables的防火 ...

  8. 读书笔记:java并发

    java中主要的同步机制是关键字synchronized,它提供一种独占锁,但是 同步这个术语还包括validate类型的变量,显示锁(Explicit Lock)以及原子变量. -------显示锁 ...

  9. TCP头分析+面试题

    一.测试程序 我们先用python来写两个测试脚本,非常简单,看代码: 服务端: from socket import * def accept(): sock = socket(AF_INET, S ...

  10. 为MyEclipse加入自己定义凝视

    非常多时候我们默认的MyEclipse的类凝视是这种,例如以下图 能够通过改动MyEclipse的凝视规则来改变,不但能够改动类的.还能够改动字段.方法等凝视规则,操作方法例如以下 1.针对方法的凝视 ...