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类。

  • 相关阅读:
    servlet之中文乱码:request.getParameter()
    html页面标题增加图标方法
    前端页面设计素材网站
    修电脑大全,学会不求人
    十篇TED点击率最高演讲,带你重新认识大数据与人工智能
    除了乔布斯,科技圈还有哪些大佬值得充信仰?
    快速建设网站的框架
    前端框架资源汇总
    获取页面跳转携带参数问题
    值得关注的博客和网站
  • 原文地址:https://www.cnblogs.com/qshting/p/5435814.html
Copyright © 2011-2022 走看看