Bootstrap3.0学习培训笔记之网页页面合理布局

日期:2021-03-20 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

本次关键来掌握的是合理布局,这个绝大多数在HTML的基础标识中也是存在的,因此相对性较为简易,以便确保系列的详细性,也顺便备考下,還是纪录1下。关键內容以下:

1.题目

2.网页页面行为主体

3.强调

4.缩略语

5.详细地址

6.引入

7.目录

8.总结

题目

Html中的全部题目标识,从<h1>到<h6>都可应用。此外还出示了.h1到.h6的class,为的是给inline特性的文字授予题目的款式。


拷贝编码
编码以下:

<div class="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>

立即看实际效果吧

在题目内还能够包括<small>标识或.small元素,能够用来标识副题目。


拷贝编码
编码以下:

<div class="container">
<h1 class="page-header">题目</h1>
<h1>h1. Bootstrap heading</h1><small>Secondary text</small>
<h2>h2. Bootstrap heading</h2><small>Secondary text</small>
<h3>h3. Bootstrap heading</h3><small>Secondary text</small>
<h4>h4. Bootstrap heading</h4><small>Secondary text</small>
<h5>h5. Bootstrap heading</h5><small>Secondary text</small>
<h6>h6. Bootstrap heading</h6><small>Secondary text</small>
</div>

 

网页页面行为主体

Bootstrap将全局性font-size设定为14px,line-height为1.428。这些特性立即赋给<body>和全部段落元素。此外,<p>(段落)还被设定了等于1/2行高的底部外边距(margin)(即10px)。


拷贝编码
编码以下:

<h1 class="page-header">网页页面行为主体</h1>
<div style="border:1px solid ">
<p style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>

根据实际效果展现就很显著了。

Lead body copy

根据加上.lead可让段落突显显示信息。


拷贝编码
编码以下:

<h1 class="page-header">Lead Body Copy</h1>
<div style="border:1px solid ">
<p class="lead" style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
<h1></h1>

根据和上面网页页面行为主体的比照便可以看到显著的实际效果了。

强调

立即应用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>


2.侧重

根据提升font-weight强调1段文字。


拷贝编码
编码以下:
<strong>rendered as bold text</strong>


3.斜体

用斜体强调1段文字。


拷贝编码
编码以下:
<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>

很显著第1行左对齐,第2行垂直居中,第3行右对齐。

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>

缩略图

  当电脑鼠标悬停在缩写和缩写词上时就会显示信息详细內容,Bootstrap完成了对HTML的<abbr>元素的提高款式。缩略语元素带有title特性,外型主要表现为带有较浅的虚线框,电脑鼠标挪到上面时会变为带有“问号”的指针。如想看详细的內容可把电脑鼠标悬停在缩略语上, 但必须包括title特性。

基础缩略语

如想看详细的內容可把电脑鼠标悬停在缩略语上, 但必须包括title特性。


拷贝编码
编码以下:
<abbr title="attribute">attr</abbr>

看到实际效果了,便是没法截到图。

Initialism

为缩略语加上.initialism能够将其font-size设定的更小些。


拷贝编码
编码以下:

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

還是只上编码自身看实际效果。  

详细地址

让联络信息内容以最贴近平常应用的文件格式展现。在每行末尾加上<br>能够保存必须的款式。


拷贝编码
编码以下:

<address>
<strong>Twitter, Inc.</strong>
795 Folsom Ave, Suite 600
San Francisco, CA 94107
<abbr title="Phone">P:</abbr> (123) 456⑺890
</address></p> <p><address>
<strong>Full Name</strong>
<a href="<a href="mailto:#">first.last</a">mailto:#">first.last</a</a>>
</address>

引入

在你的文本文档中引入别的来源于的內容。

默认设置款式的引入

将任何裹在当中便可主要表现为引入。针对立即引入,大家提议用标识。裹在当中便可主要表现为引入。针对立即引入,大家提议用标识。


拷贝编码
编码以下:

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

引入选项

针对规范款式的<blockquote>,能够根据几个简易的变体就可以更改设计风格和內容。

取名来源于:加上<small>标识来注明引入来源于。来源于名字能够放在<cite>标识里边。


拷贝编码
编码以下:

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

会多1个Source Title

另外一种展现设计风格

应用.pull-right可让引入呈现出向右边挪动、对齐的实际效果。


拷贝编码
编码以下:

<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

向右对齐挪动了额,自然也是有相应的pull-left。  

目录

无编码序列表

次序不相干紧要的1列元素。


拷贝编码
编码以下:

<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的1样。

井然有序目录

次序相当关键的1组元素。


拷贝编码
编码以下:

<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款式和左边外边距的1组元素(只对于立即子元素)。这这是对于立即子元素,也便是说,你必须对全部嵌套循环的目录都加上此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;并加上小量的内补,将全部元素置放于同1列。


拷贝编码
编码以下:

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

实际效果自然便是在1行了。

叙述

带有叙述的短语目录。


拷贝编码
编码以下:

<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>内短语及其叙述排在1行。刚开始是像<dl>默认设置款式层叠在1起,伴随着导航栏条慢慢进行而排序在1样。


拷贝编码
编码以下:

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

总结

关键是简易的回望1下,在用的情况下再熟习1下,应当就并不是甚么难题了。

最终填补再填补1个专业知识点,或许一些状况還是用的到的额。

内联编码:在文章正文中根据<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-scrollableclass,其功效是设定max-height为350px,并在竖直方位展现翻转条。

以上便是本文的所有內容了,小伙子伴们是否对这些普遍的html标识又有了新的了解了呢,所谓温故而知新嘛,期待对大伙儿能有一定的协助。