zoukankan      html  css  js  c++  java
  • Bootstrap学习速查表(二) 排版及表格

    一、h1~h6标签

    固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14pxh6=12px。

    1、重新设置了margin-topmargin-bottom的值,  h1~h3重置后的值都是20pxh4~h6重置后的值都是10px。
    2、所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。

    二、h1~h6标签的副标题<small>标签

    <h1>Bootstrap标题一<small>我是副标题</small></h1>
    h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small {font-size: 65%;}
    h4,.h4,h5,.h5,h6,.h6 { margin-top: 10px;margin-bottom: 10px;}
    h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small { font-size: 75%;}

    1、行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)。
    2、由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;

    三、body标签及p标签 的初始设置

    body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff;}

    p {margin: 0 0 10px;}

    1、行高为1.42857143(line-height),大约是20px

    四、强调内容的标签

    1、如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。用法如下:

    2、除此之外,Bootstrap还通过元素标签:<small><strong><em><cite>给文本做突出样式处理。

    3、在Bootstrap中,可以使用<b><strong>标签让文本直接加粗。

    4、除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过使用标签<em><i>来实现。

    5、强调颜色的样式名称

    .text-muted:提示,使用浅灰色(#999)
    .text-primary:主要,使用蓝色(#428bca)
    .text-success:成功,使用浅绿色(#3c763d)
    .text-info:通知信息,使用浅蓝色(#31708f)
    .text-warning:警告,使用黄色(#8a6d3b)
    .text-danger:危险,使用褐色(#a94442)

    6、文本对齐的风格

    <p class="text-left">我居左</p>
    <p class="text-center">我居中</p>
    <p class="text-right">我居右</p>
    <p class="text-justify">我两端对齐</p>

    五、列表标签ul、ol、dl

    1、去点列表,通过给无序列表添加一个类名.list-unstyled”,这样就可以去除默认的列表样式的风格。

    2、水平列表,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表而且去掉项目符号(编号)保持水平显示。也可以说内联列表就是为制作水平导航而生。

    .list-unstyled {padding-left: 0;list-style: none;}
    .list-inline {padding-left: 0;margin-left: -5px;list-style: none;}
    .list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}
     

    六、插入代码风格

    在Bootstrap主要提供了三种代码风格<code>、<pre>、<kbd>
    1、使用<code></code>来显示单行内联代码
    2、使用<pre></pre>来显示多行块代码
    3、使用<kbd></kbd>来显示用户输入代码

    4、多行块代码块,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

    <div>Bootstrap的代码风格有三种:
      <code>&lt;code&gt;</code>
      <code>&lt;pre&gt;</code>
      <code>&lt;kbd&gt;</code>
    </div>
    .pre-scrollable {max-height: 340px;overflow-y: scroll;}
    

    七、表格table 标签

    Bootstrap为表格提供了1种基础样式4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用。

    1、Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:(table标签上)

      ☑  .table:基础表格

      ☑  .table-striped:斑马线表格

      ☑  .table-bordered:带边框的表格

      ☑  .table-hover:鼠标悬停高亮的表格

      ☑  .table-condensed:紧凑型表格

      ☑  .table-responsive:响应式表格

    2、Bootstrap还为表格的行元素<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下表所示:

         特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,注意要实现悬浮状态,需要在<table>标签上加入table-hover类。

  • 相关阅读:
    服务部署 RPC vs RESTful
    模拟浏览器之从 Selenium 到splinter
    windows程序设计 vs2012 新建win32项目
    ubuntu python 安装numpy,scipy.pandas.....
    vmvare 将主机的文件复制到虚拟机系统中 安装WMware tools
    ubuntu 修改root密码
    python 定义类 简单使用
    python 定义函数 两个文件调用函数
    python 定义函数 调用函数
    python windows 安装gensim
  • 原文地址:https://www.cnblogs.com/qshting/p/5435814.html
Copyright © 2011-2022 走看看