Bootstrap基础教程
朱丽文

1
2
3
4
5
6
7
8
  • 表单
9
  • CSS组件
10
  • JavaScript插件
11
  • 第三方扩展
12
  • 综合案例

CSS布局（一）

发布时间：2020-03-14 19:52   发布人：朱丽文   浏览次数：899

CSS布局（一）

本节主要内容：      

             本章介绍了Bootstrap提供给HTML各元素的CSS布局样式，其中包括标题、段落等基础文本排版样式及列表、代码、表格、按钮、图像、辅助类等的样式。

3.1 排版

3.2 列表

3.3代码 

3.4 表格

3.5 按钮

3.6 图像

3.7 辅助类

3.8 案例—个人简历


 3.1 排版

3.1.1标题

1．h1-h6标签

Bootstrap可以使用HTML中的<h1>到<h6>这六个标题标签，并且分别赋予了它们半粗体属性及由大到小的字体大小font-size的属性。

<h1>一级标题（半粗体 36px）</h1>

<h2>二级标题（半粗体 30px   </h2>

<h3>三级标题（半粗体 24px）</h3>

<h4>四级标题（半粗体 18px）</h4>

<h5>五级标题（半粗体 14px）</h5>

<h6>六级标题（半粗体 12px）</h6>

实例：h1-h6标签.html


2．使用样式类.h1-.h6

h1到.h6六个样式类可以给内联属性的文本赋予不同级别标题的样式。

<span class="h1">标题1文本</span>

<span class="h2">标题2文本</span>

<span class="h3">标题3文本</span>

<span class="h4">标题4文本</span>

<span class="h5">标题5文本</span>

<span class="h6">标题6文本</span>

实例：使用类h1-h6标签.html


3．小标题  

当一个标题内含有小标题(子标题或副标题)时，可以在该标题内嵌套添加<small>元素或者给小标题元素应用样式类.small，这样可以得到一个字号更小、颜色更浅的文本，即小标题。

<h1>一级标题<small>小标题1</small></h1>

<h6>六级标题<span class="small">小标题6 </span></h6>

实例：小标题.html



3.1.2段落 

1．基本段落

Bootstrap将页面的全局字体大小font-size设置为14px，行高line-height设置为1.428。<body>元素及段落<p>元素都被赋予了这些属性。另外，<p>元素还被设置了等于1/2行高（10px）的底部外边距（margin-bottom）。

实例：基本段落.html


2．中心内容

在多个段落中，为了突出显示某一个段落作为强调的中心内容或引导主体内容，可以给该段落应用样式类.lead。这样可以得到更大更粗、行高更高的段落文本，但是有些浏览器不支持这一类。

实例：中心内容.html



3.1.3mark标签 

<mark>标签用于需要突出显示的高亮文本。

<p>你可以使用mark标签标记<mark>高亮</mark>文本<p>

实例：mark标签.html


3.1.4小号文本

对于不需要强调的文本，可以使用<small>标签将其内的文本设置为其父元素字体大小的 85%。标题元素中嵌套的<small>元素被设置为不同的字体大小。另外，可以为行内元素应用样式类.small以达到同样的效果。

<small>这行是小号文本</small>

<p>普通段落文本<span class="small">小号文</span></p>

实例：小号文本.html



3.1.5del和s标签

在页面中对被删除的文本可以使用<del>标签，对没用的（不在准确或不相关的）文本可以使用<s>标签，使用了这两个标签的文本都被赋予了删除线的属性。

<p><del>这里是已经被删除的文本。</del></p>

<p><s>这里是不再有用的文本。</s></p>

实例：del和s标签.html



3.1.6ins和u标签

在页面中对额外插入的文本可以使用<ins>标签，对专有名词（人名、地名、朝代名等）可以使用<u>标签，使用了这两个标签的文本都被赋予了下划线的属性。

<p><ins>这里是已经被删除的文本。</ins></p>

<p><u>宋代</u></p>

实例：ins和u标签.html



3.1.7strong和em标签

<strong>和<em>这两个标签都是用来强调一段文本。<strong>是通过增加字体的粗细font-weight属性值来强调，而<em>是通过斜体来强调。

<p><strong>粗体强调文本</strong></p>

<p><em>斜体强调文本</em></p>

实例：strong和em标签.html



3.1.8b和i标签

在 HTML中<b>标签用于高亮单词或短语，不带有任何着重的意味；而<i>标签主要用于发言、技术词汇等。

<p>下面的词语将高亮显示：<b>bootrstrap</b></p>

<p>下面的词语是一个技术词汇：<i>数据挖掘技术</i></p>

实例：b和i标签.html



3.1.9文本对齐方式

Bootstrap提供了.text-left、.text-right、.text-center、.text-justify、.text-nowrap这几个文本对齐类，可以简单方便地将文字重新对齐。

<p class="text-left">左对齐文本</p> 

<p class="text-center">居中文本</p> 

<p class="text-right">右对齐文本</p> 

<p class="text-justify">两段对齐文本</p>

<p class="text-nowrap">不换行文本</p>

实例：文本对齐方式.html



3.1.10字母大小写 

.text-lowercase：将大写字母转换为小写字母。

.text-uppercase：将小写字母转换为大写字母。

.text-capitalize：将文本首字母转换为大写。

<p class="text-lowercase">将大写转换为小写：ABC</p>

<p class="text-uppercase">将小写转换为大写：abc</p>

<p class="text-capitalize">将首字母转换为大写：alice</p>

实例：字母大小写 .html


3.1.11缩略语

HTML提供了<abbr>标签用于缩略语，Bootstrap定义了<abbr>元素的样式为带有较浅的虚线下边框，当鼠标悬停在上面时会变成带有“问号”的指针，同时会显示出完整的文本（必须为<abbr>的title属性添加了文本）。

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

实例：缩略语.html


3.1.12地址

使用<address>标签可以在网页上显示联系信息，在该元素内每行信息的结尾使用标签<br />来保留样式。

<address>

湖北省武汉市洪山区<br />

光谷大道<br>

<strong>武汉软件工程职业学院</strong><br />

     <abbr title="Phone">P:</abbr> 027-12345678

</address>

<address>

    <strong>Alice</strong><br />

    <a href="mailto:#">Alice@hotmail.com</a>

</address>

实例：地址.html


3.1.13引用

当需要在文档中引用其他来源的内容时，可以使用<blockquote>标签。

1．默认样式的引用

将任何HTML元素包裹在<blockquote>元素中即可表现为引用样式，对于直接引用的文本应该使用<p>标签。

<blockquote><p>这是一个默认的引用实例。</p></blockquote>

实例：默认样式的引用.html


2．blockquote 选项

1）添加引用来源

<blockquote> 

    <p>这是一个引用实例。</p>

    <footer>Alice <cite title="著作名">《著作名》</cite></footer> 

</blockquote>

实例：添加引用来源.html


2）改变引用显示方式

<blockquote class="blockquote-reverse"> 

    <p>这是一个引用实例。</p>

    <footer>Alice <cite title="著作名">《著作名》</cite></footer> 

</blockquote>

实例：改变引用显示方式.html


3.2 列表

3.2.1无序列表和有序列表 

无序列表是指没有特定顺序的一列元素，是以传统风格的着重号开头的列表。有序列表是顺序至关重要的一组元素，是以数字或其他有序字符开头的列表。

<h4>无序列表</h4>

<h5>web标准</h5>

<ul>

  <li>HTML</li>

  <li>CSS</li>

<li>JavaScript</li>

</ul>

  <h4>有序列表</h4>

  <h5>安装流程</h5>

<ol>

  <li>第一步骤</li>

  <li>第二步骤</li>

  <li>第三步骤</li>

</ol>

实例：无序列表和有序列表 .html


3.2.2无样式列表

通过给列表<ul>或<ol>元素应用样式类.list-unstyled，可以移除默认的list-style样式（列表项目符号和左侧外边距）。这是针对直接子元素的，如果列表包含有嵌套列表则必须逐个给列表添加这个样式才能具有同样的效果。

<h4>水果</h4>

<ul class="list-unstyled">

  <li>香蕉</li>

  <li>苹果

    <ul>

      <li>红富士</li>

      <li>黄元帅</li>

      <li>嘎啦</li>

    </ul>

  </li>

  <li>梨子</li>

</ul>

实例：无样式列表.html


3.2.3 内联列表

通过给列表<ul>或<ol>元素应用样式类.list-inline，可以将列表的所有元素放置于同一行，这种形式的列表也叫做内联列表。这个效果是通过设置display: inline-block并添加少量的内边距（padding）来实现的。

<h4>内联列表</h4>

<h5>香蕉</h5>

<ul class="list-inline">

  <li仙人蕉</li>

  <li>美蕉</li>

  <li>天宝蕉</li>

</ul> 

实例：内联列表.html


3.2.4 描述列表

1．基本描述列表

描述列表（定义列表）是指带有描述的短语列表。

<dl>

  <dt>苹果</dt>

  <dd>。。。</dd> 

  <dt>香蕉</dt>

  <dd>。。。</dd>

</dl>

实例：基本描述列表.html


2.水平描述列表

通过给<dl>元素应用样式类.dl-horizontal，可以让该元素内的短语及其描述排在同一行。

<dl class="dl-horizontal">

  <dt>地震云</dt>

  <dd>是一种。。。</dd> 

  <dt>地震波</dt>

  <dd>是由地震震源向四处传播的振动，指从震源产生向四周辐射的弹性波。</dd>       

</dl>

实例：水平描述列表.html


3.3代码 

Bootstrap 允许使用下面几个标签来显示页面中的代码文本：

<code>：包裹内联样式的代码片段。

<kbd>：标记用户通过键盘输入的内容。

<pre>：显示多行代码，注意将尖括号做转义处理。此外可以使用样式类.pre-scrollable，其作用是设置max-height为350px,并在垂直方向展示滚动条。

<var>：标记变量。

<samp>：标记程序输出的内容。

<code>&lt;h1&gt;&lt;/h1&gt;</code><br /><br />

<pre class="pre-scrollable">

    void swap(int x, int y)  

    {  

      int t;  

      t=x;  

      x=y;  

      y=t;  

    }  

</pre><br />

请输入<kbd>ctrl s</kbd>来保存代码<br /><br />

<var>y</var>=<var>x</var> <var>y</var> <var>z</var><br /><br />

<samp>程序输出内容</samp>

实例：代码.html


+添加讨论

日照职业技术学院在线教学平台  [收藏本站]  访问量：6407905
问题反馈与建议：xxh@rzpt.cn    QQ群：491641626

鲁公网安备 37110202000410号    鲁ICP备07024478-2号