zoukankan      html  css  js  c++  java
  • Bootstrap关于排版

    1.Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式

    2.使用了<small>标签来制作副标题,由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;

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

    处理。

    4.<b>和<strong>加粗

    5.<em>或<i>斜体

    6.强调相关的类:

    .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:两端对齐

    8.列表:

    无序列表 <ul>     <li>…</li> </ul>

    有序列表 <ol>     <li>…</li> </ol>

    定义列表 <dl>     <dt>…</dt>     <dd>…</dd> </dl>

    去点列表使用类:.list-unstyled

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

    Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。

    9.三种代码风格:

    a、使用<code></code>来显示单行内联代码

    b、使用<pre></pre>来显示多行块代码

    c、使用<kbd></kbd>来显示用户输入代码

    <pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

  • 相关阅读:
    Codeforces 1316B String Modification
    Codeforces 1305C Kuroni and Impossible Calculation
    Codeforces 1305B Kuroni and Simple Strings
    Codeforces 1321D Navigation System
    Codeforces 1321C Remove Adjacent
    Codeforces 1321B Journey Planning
    Operating systems Chapter 6
    Operating systems Chapter 5
    Abandoned country HDU
    Computer HDU
  • 原文地址:https://www.cnblogs.com/agile2011/p/4101839.html
Copyright © 2011-2022 走看看