zoukankan      html  css  js  c++  java
  • 有关bootstrap之排版

    1.标题

      HTML中的所有标题标签,从<h1>  <h6> 均可用。另外,还提供了.h1 .h6 class,为的是给inline属的文本赋予标题的样式。

       在标题内还可以包含<small>标签或.small元素,可以用来标记副标题。

    2.页面主体

    Bootstrap将全局font-size设置为14pxline-height1.428。这些属性直接赋给<body>和所有段落元素。另外,<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)。

    通过添加 .lead 可以让文本段落突出显示。

    对于不需要强调的inline或block类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size

    你还可以为行内元素赋予.small以代替任何<small>标签。

    通过增加font-weight 来着重强调一段文本。

    用斜体强调一段文本:<em>rendered as italicized text</em>

    还可以使用HTML5中定义的<b>  <i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示,<i>大部分用于发言、技术短语等情况。

    3.对齐class

    通过文本对齐class,可以简单方便的将文本对齐。‘text-left’‘text-center’‘text-right

    4.强调class

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

    5.缩略语

    当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

    基本的缩略语:如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性

    为缩略语添加.initialism可以将其font-size设置的更小些

    6.地址:

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

    <address>
    
      <strong>长安大街.</strong><br>
    
      第三大胡同<br>
    
      门牌号 CA 94107<br>
    
      <abbr title="Phone">P:</abbr> 010-667788</address>
    
    <address>
    
      <strong>Full Name</strong><br>
    
      <a href="mailto:#">first.last@example.com</a></address>
    

      

    7.引用:

    将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用建议用<p>标签。

    对于标准样式的<blockquote>,可以通过几个简单的变体就能改变风格和内容

    添加<small>标签或.small class 来注明引用来源。来源名称可以放在<cite>标签里面。

     1 <blockquote>
     2 
     3   <p>锄禾日当午,汗滴禾下土</p>
     4 
     5   <small>Someone famous in <cite title="Source Title">锄禾</cite></small></blockquote>
     6 
     7 使用.pull-right可以让引用展现出向右侧移动、对齐的效果
     8 
     9 <blockquote class=‘pull-right’>
    10 
    11   <p>锄禾日当午,汗滴禾下土</p>
    12 
    13   <small>Someone famous in <cite title="Source Title">锄禾</cite></small></blockquote>

    8.列表:无序列表,有序列表,

    无样式列表:添加 .list-unstyled; 移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式。

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

    dl-dt-dd:

    水平排列的描述:.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起,随着导航条逐渐展开而排列在一样。 其中有个自动截断:通过text-overflow,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。

  • 相关阅读:
    Asp.net(C#) windows 服务{用于实现计划任务,事件监控等}
    DLL反编译,DLL反编译成C#代码, 有些不良同学会用到哦!
    各种分享按钮代码
    ASP.NET 计划任务(不使用外接程序,.net内部机制实现)
    工厂模式{C#描述}
    FI:Customize FBL3N Layout
    简单工厂 工厂模式 抽象工厂C#
    URL, URI 和 URN 之间的区别转
    resize属性,使textarea在ff(火狐)中禁止拉伸
    UML类图几种关系的总结转
  • 原文地址:https://www.cnblogs.com/liulijun330/p/6161137.html
Copyright © 2011-2022 走看看