2. 排版

来源:互联网 发布:用java编写99乘法表 编辑:程序博客网 时间:2024/05/21 20:21

 1. 标题
     ● 重置了h1~h6的margin-top/bottom值,还有和标题相同样式的h1~.h6六个类名。
     ● 标题后面可以跟副标题small(默认行高1,不加粗,灰色字体,字体大小:h1~h3(占65%); h4~h6(75%) ), 标题类同理。

<h1>Bootstrap标题一<small>我是副标题</small></h1>

2. 段落 (p)

     ● 配置:  字号:14px  行高:1.42857143  颜色:深灰色 #333   字体:"Helvetica Neue", Helvetica, Arial, sans-serif;(font-family)字体是从body继承而来

3. 强调文本( 加类名: .lead)

     ● 想让一个段落p突出显示,可以通过添加类名“.lead”实现 (样式为: 增大字号,加粗文本,行高和margin也有做相应处理)

<p class="lead">这部分内容需要特别的强调,我和别人长得不一样</p>

4. 加粗( 使用 <b>, <strong>标签)

5. 斜体 ( 用<em>, <i>标签)

   补充:其它还有:<mark>  有浅色背景阴影突出标记文字内容

            <del>和<s>   在文本中间显示横线,标记为删除和无用文本

           <ins>和<u>   给文本加下划线效果

6.  强调相关的类( 类似类 .lead )

    .text-muted:    提示,使用浅灰色(#999)    .text-primary:  主要,使用蓝色(#428bca)    .text-success:  成功,使用浅绿色(#3c763d)    .text-info:     通知信息,使用浅蓝色(#31708f)    .text-warning: 警告,使用黄色(#8a6d3b)    .text-danger:  危险,使用褐色(#a94442)
7. 文本对齐风格
    .text-left:     左对齐    .text-center:   居中对齐    .text-right:    右对齐    .text-justify:  两端对齐!!特别声明:目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候。所以项目中慎用。


      补充:

  字母大小写(类):

  •   .text-lowercase   将字母转换为小写
  •   .text-uppercase  将字母转换为大写
  •   .text.capitalize     首字母大写

  <abbr>的title属性

<p>Bootstrap 提供了两种形式的<abbr title="并且提供了压缩与未压缩两种版本">压缩包</abbr></p>在鼠标移上去之后显示title里的文本内容

  引用样式<blockquote>

<blockquote>    <p>Bootstrap提供了两种形式的压缩包<p>    <footer>来自bootstrap官网</footer><!-- footer用来标记引用源 -->    <cite>Btootstrap</cite> <!-- cite用来包含原名称 --></blockquote>
8. 列表

   有六种形式的列表:
   ☑  无序列表(ul)
   ☑  有序列表(ol)
   ☑  去点列表(   .list-unstyled:    将列表默认的左边内距清0了)
   ☑  内联列表(   .list-inline:          把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示,注意是给ul添加)
   ☑  定义列表( 调整了行间距,外边距和字体加粗效果)
   ☑  水平定义列表(    .dl-horizontal    只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果 )

9. 代码风格

  1、使用  <code></code>  来显示单行内联代码
  2、使用  <pre></pre>  来显示多行块代码
  3、使用  <kbd></kbd>  来显示用户输入代码

  4、使用  <var></var>  来标记变量信息

  5、使用  <samp></samp>  来标记程序的输出 内容

<div>Bootstrap的代码风格有三种:<code><code></code>、<code><pre></code>和<code><kbd></code></div>不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来&lt;替代,大于号(>)使用“&gt;”来替代

  其中,<pre>  加.pre-scrollable  可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

10.  表格
 共分为1种基础样式和4种附加样式以及1个支持响应式的表格

表格table的几种类
 ☑  .table:基础表格
 ☑  .table-striped:               斑马线表格(利用css2有 tr:nth-child(odd奇数行)来实现的 )
 ☑  .table-bordered:           带边框的表格
 ☑  .table-hover:                 鼠标悬停高亮的表格
 ☑  .table-condensed:      紧凑型表格
 ☑  .table-responsive:     响应式表格(在table外层加个容器并加上这个类名使用 <768px时,表格底部会出现水平滚动条,>768px时又会自动消失 )

注意:以上类的<table>元素中一定不能缺少类名“table”!

表格行的类

 

特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。


0 1
原创粉丝点击