码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap(2)

时间:2015-06-18 11:01:25      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:

强调

可以直接使用HTML中用于强调的标签,并且可以给他们添加少许的css样式。

小号文本

对于那些不需要强调的inline和block类型的文本,可以使用<small>标签包裹,他们的文本中的文字字体大小将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置为不同的字体大小。当然,你还可以为行内元素添加.small来替代任何<small>标签。

着重

Font-weight原本是CSS中加重字体的样式语句,但在bootstrap中,我们还可以通过添加他来强调一段文本。

例如: <strong>哈哈</strong>
结果:哈哈。

斜体

除了用加重强调以外,我们还可以通过倾斜字体来起到强调的作用。

例如: <em>呵呵</em>

结果:呵呵。

可选元素:在HTML5中,有许多自定义元素,<b>,<i>。前者(<b>)表示在不增加额外重要性的同时将词和短语高亮显示,而后者(<i>)大部分都用于发言、技术短语等情况。

对齐class

可用通过进行添加.text-left等来对选中的文本的文字重新对齐。方便且简单。

例如:
<p class="text-left">你好</p> 
<p class="text-center">谢谢</p> 
<p class="text-right">再见</p>

结果:“你好”为文本左对齐;“谢谢”为文本居中;“再见”为文本右对齐。

强调class

我们可以通过给这些class添加颜色来表示强调,也可以在连接上添加颜色,当鼠标移动上去的时候,他的颜色就会发生改变,和默认的链接样式一样。

例如:

<p class="text-muted">百度</p> 
<p class="text-primary">新浪</p> 
<p class="text-success">搜狐</p> 
<p class="text-info">谷歌</p> 
<p class="text-warning">QQ</p> 
<p class="text-danger">火狐</p>

结果:百度,.新浪,搜狐,谷歌,QQ,火狐。

缩略语

当文字很多时,我们可以用缩略语,当鼠标移动到缩写词上时,他就会显示出完整的内容,

Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略元素带有title属性。外观表现为带有较浅的虚线框,鼠标移动至其上方时会变成“问号”形式的指针。如果要想看完整条的内容,除了要将鼠标移动到缩略语上,还需要其含有title属性才能实现。

Initialism:在缩略语上添加.initialism可以让文本文字设置的更小。

引用

引用:在你的文档中引用其他来源的内容。

将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用,一般引用的标签为<P>标签。

例如:

<blockquote> 
 <p>我们未来的世界</p> 
</blockquote>

引用选项

我们可以通过添加几个简单的变体就能改变<blockquote> 风格和内容。比如可以添加<small>标签或使用.small class来注明引用来源。来源名称可以放在<cite>标签里面。
例如:
<blockquote> 
   <p>天天向上</p> 
  <small>湖南<cite title="">卫视</cite></small> 
</blockquote>

结果:

天天向上

湖南卫视
 
通过添加.pull-right可以使该文本向右侧移动、对齐的效果I。
列表
无序列表:顺序无关紧要的一列元素。
例如:
<ul> 
  <li>赵云</li> 
  <li>关羽</li>
  <li>张飞</li>
  <li>黄忠</li>
</ul>
结果:
  • 赵云
  • 关羽
  • 张飞
  • 黄忠

有序列表:和无序列表刚好相反,顺序至关重要的一组元素。

例如:

<ol> 
  <li>第一项</li> 
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
</ol>
结果:
  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项
内联列表:通过设置display:inline-block,并且添加少量的内补,将所有元素防止语同一列。
例如:
<ul class=”list-inline”> 
  <li>衣服</li> 
  <li>裤子</li>
  <li>鞋子</li>
</ul>
结果:
        衣服  裤子  鞋子

bootstrap(2)

标签:

原文地址:http://www.cnblogs.com/z5206808/p/4585025.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!