2.2Bootstrap排版

最新推荐文章于 2023-09-26 14:27:08 发布

陌苏湮雪

最新推荐文章于 2023-09-26 14:27:08 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/a316212802/article/details/24913615

版权

web开发－－前端框架专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1、标题

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

<body>


	<div class="page-container">
	<h1 class="page-header">标题</h1>
	<h1>h1,Bootstrap heading</h1>
	<h2>h2,Bootstrap heading</h2>
	<h3>h3,Bootstrap heading</h3>
	<h4>h4,Bootstrap heading</h4>
	<h5>h5,Bootstrap heading</h5>
	<h6>h6,Bootstrap heading</h6>
	</div>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
</body>

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

2、页面主体

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

Lead body copy

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

3、强调

直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。

1.小号文本

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

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

第一行是<small>This line of text is meant to be treated as fine print.</small>
第二行是<div>
<p class="small">
哈哈哈哈哈哈哈
</p>
</div>

2.着重

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

<strong>rendered as bold text</strong>

3.斜体

用斜体强调一段文本。

<em>rendered as italicized text</em>

4.对齐class

通过文本对齐class，可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

很明显第一行左对齐，第二行居中，第三行右对齐。

5.强调class

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

    <h1>强调Class</h1>
    <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
    <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
    <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <h1></h1>

4、缩略图

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

基本缩略语

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

<abbr title="attribute">attr</abbr>

Initialism

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

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

5、地址

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

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

6、引用

在你的文档中引用其他来源的内容。

默认样式的引用

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

<blockquote>
  <p>生命的意义不仅限于生存，云在青天水在瓶。</p>
</blockquote>

引用选项

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

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

<blockquote>
	<p>生命的意义不仅限于生存，云在青天水在瓶。</p>
	<small>本文来自于：<cite title="http:www.hehehe.com">来源链接</cite></small>
	</blockquote>

会多一个Source Title

另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。

    <blockquote class="pull-right">
      <p>生命的意义不仅限于生存，云在青天水在瓶。</p>
    </blockquote>

向右对齐移动了额，当然也有相应的pull-left。　

7、列表

无序列表

顺序无关紧要的一列元素。

    <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
    </ul>

这个也很明显和Html的一样。

有序列表

顺序至关重要的一组元素。

    <ol>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
    </ol>

　同理有序列表。

无样式列表

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

    <ul class="list-unstyled">
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
    </ul>

内联列表

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

    <ul class="list-inline">
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Lorem ipsum dolor sit amet</li>
    </ul>

效果当然就是在一行了。

描述

带有描述的短语列表。

    <dl>
      <dt>.Lorem ipsum dolor sit amet</dt>
      <dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd>
    </dl>

记得这标签在Html当中也是存在的。

水平排列的描述

.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起，随着导航条逐渐展开而排列在一样。

 
         <dl  
         class 
         = 
         "dl-horizontal" 
         > 
        
         <dt>hello</dt> 
        
         <dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd> 
        
         </dl>

内联代码：在正文中通过<code>标签包裹内联样式的代码片段。

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

简单的效果

基本代码快：多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理。

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

简单效果

还可以使用.pre-scrollable class，其作用是设置max-height为350px，并在垂直方向展示滚动条。