bootstrap第三章：基本的BootstrapCSS

最新推荐文章于 2024-01-26 19:05:54 发布

维持好习惯

最新推荐文章于 2024-01-26 19:05:54 发布

阅读量488

点赞数

分类专栏： bootstrap 文章标签： bootstrap css html

本文链接：https://blog.csdn.net/qq_62244121/article/details/127472646

版权

bootstrap 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

bootstrap第三章：基本的BootstrapCSS

文章目录

bootstrap第三章：基本的BootstrapCSS

如果有bootstrap概念基础和布局基础可从第二点开始看.

1.bootstrap css引导

html5文档类型

Bootstrap使用了一些HTML5元素和CSS属性。要做到这一点，需要使用HTML5文档类型(Doctype)。因此，在Bootstrap项目的开头包含以下代码片段。

<!DOCTYPE html>
<html>
</html>

如果在Bootstrap创建的Web页面的开头不使用HTML5的文档类型(Doctype)，运行时可能会遇到一些浏览器显示不一致的情况，甚至在代码不能通过W3C标准的特定情况下会出现不一致。

移动优先

自从Bootstrap 4发布以来，Bootstrap就变成了手机优先。需要添加viewport meta标签到元素，以确保在移动设备上适当的渲染和触摸缩放。

<meta name = "viewport" content = "width = device-width, initial-scale = 
1.0">

width属性控制设备的宽度。将其设置为device-width将确保它在各种设备(手机、台式机、平板电脑……)上正确呈现.
Initial-scale = 1.0确保当加载时，你的网页将以1:1的比例呈现，而不会应用缩放.
向content属性添加user-scalable = no以禁用移动设备上的缩放功能，如下所示。用户只能滚动，不能缩放.

<meta name = "viewport" content = "width = device-width, initial-scale = 
1.0, maximum-scale = 1.0, user-scalable = no">

通常maximum-scale = 1.0和user-scalable = no一起使用。user-scalable = no属性不能使用缩放,可能会影响用户体验.故一般不使用.

图像响应

Bootstrap 4允许您通过向< img>标签添加类.img-responsive来使图像具有响应性。这个类使用

 max-width: 100%; and height: auto;

这样它就能很好地缩放到父元素。

<img src = "..." class = "img-responsive" alt = "Responsive image">

排版和链接

Bootstrap设置基本的全局显示(背景)、排版和链接样式

基本的全局显示:设置
```
background-color: #fff;
```
在< boby>中.
排版:使用@font-family-base、@font-size-base和@line-height-base属性作为排版基础。
Link styles−通过@link-color属性设置全局链接颜色，并只在:hover时应用链接下划线。

(如果打算使用LESS代码，在scaffolding .less中会发现所有这些)

标准化

Bootstrap使用Normalize来建立跨浏览器的一致性。

Normalize.css是一个现代的、支持html5的CSS重置的替代方案。它是一个小的CSS文件，在HTML元素的默认样式中提供了更好的跨浏览器一致性。

容器

使用类.container包装页面内容，同时内容将居中显示.

在bootstrap.css中容器类的css样式使用,和使用css类选择器相同

 .container { 
   padding-right: 15px; 
   padding-left: 15px; 
   margin-right: auto; 
   margin-left: auto; 
}

注意，由于有填充和固定宽度，默认情况下容器是不可嵌套的。详情看博客第二章.

Bootstrap的设备支持

一般来说，Bootstrap支持每个主要平台的默认浏览器的最新版本。请注意，代理浏览器(如Opera Mini, Opera Mobile的Turbo模式，UC Browser Mini, Amazon Silk)不受支持。

各设备浏览器的支持表格
在这里插入图片描述

bootstrap的浏览器支持

同样，支持大多数桌面浏览器的最新版本。
在这里插入图片描述
虽然不被官方支持,Bootstrap在Chromium和Chrome for Linux, Firefox for Linux和Internet Explorer 9都能正常使用。

2.排版

使用bootstrap的css样式,需要引入包bootstrap.css,否则没有效果

  <link rel="stylesheet" href="../css/bootstrap.css">

2.1bootstrap默认设置

从排版开始，Bootstrap在默认字体栈中使用Helvetica Neue, Helvetica, Arial和sans serif。这些都是标准字体，在所有主流计算机上都是默认的。如果碰巧这些字体不存在，它们会返回到sans serif，告诉浏览器使用浏览器的默认字体。

所有< boby>的字体大小默认设置为14像素，行高设置为20像素。标签的页边距底部为10像素或行高的一半。

2.2标题,内联和显示标题

下面6种标准标题都采用了bootstrap样式.可以发现,在对应标题内加入small标签,就可以得到较小的文本,颜色较浅.这个方法可以用于添加内联子标题.

    <h1>Heading1 h1. <small>Small Heading1 h1</small></h1>
    <h2>Heading2 h2. <small>Small Heading2 h2</small></h2>
    <h3>Heading3 h3. <small>Small  Heading3 h3</small></h3>
    <h4>Heading4 h4. <small>Small  Heading4 h4</small></h4>
    <h5>Heading5 h5. <small>Small  Heading5 h5</small></h5>
    <h6>Heading6 h6. <small>Small  Heading1 h6</small></h6>

得到输出为
在这里插入图片描述

2.3突出显示标题

class的display属性用于突出显示标题,使用后的标题比同级标题会更突出(简单来说就字体更大)

<h1>Display normal Heading</h1>
<h1 class="display-1">Display Heading 1</h1>
<h1 class="display-2">Display Heading 2</h1>
<h1 class="display-3">Display Heading 3</h1>
<h1 class="display-4">Display Heading 4</h1>

输出
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2a9bDOXo-1666496024149)(D:\学习\博客\前端学习笔记\typore图片\image-20221020092040325.png)]$

2.4段落处理

Bootstrap的全局默认字体大小是1rem(通常是16px)，行高为1.5rem(通常是24px)，这适用于元素以及所有段落.

与突出显示标题类似，也可以使用类.lead突出显示段落。效果也是使用突出效果的段落与其它段落相比更突出（字体更大）。

  <p>Normal paragraph</p> 
          <p class="lead">Paragraph that stands out in Bootstrap.</p>

2.5文本强调(字体倾斜,变小等)

html的字体倾斜等样式仍然可以在bootstrap中使用.(实际运用中引入bootstrap.css后,字体会比只使用html大点).

<!--字体加粗-->
<p><b>This is bold text</b></p>
<!--代码块-->
<p><code>This is computer code</code></p>
<!--斜体-->
<p><em>This is emphasized text</em></p>
<!--斜体-->
<p><i>This is italic text</i></p>
<!--段落标记-->
<p><mark>This is highlighted text</mark></p>
<!--字体更小-->
<p><small>This is small text</small></p>
<!--字体加粗-->
<p><strong>This is strongly emphasized text</strong></p>
<!--字体下沉和上浮-->
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<!--下划线-->
<p><ins>This text is inserted to the document</ins></p>
<!--删除-->
<p><del>This text is deleted from the document</del></p>

对应输出为
在这里插入图片描述

2.5.1强调类

Bootstrap提供了一些类，可用于为文本提供强调，如下例所示

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<!--实际运用中字体右偏已经无法使用-->
<p class="text-right">Right aligned text.</p>
<!--文本对齐属性-->
<p class="text-justify">Justified text.</p>
<hr/>

<p class="text-lowercase">I will keep it up.</p>
<!--单词字母全部大写-->
<p class="text-uppercase">I will keep it up.</p>
<!--每个单词的首字母大写-->
<p class="text-capitalize">I will keep it up.</p>
<hr/>
<p class="text-primary">蓝色字体：用于提醒在继续之前请仔细阅读说明</p>
<p class="text-secondary">灰色字体：用于提醒该特性已从最新版本中删除。</p>
<p class="text-success">绿色字体：用于说明消息已经成功发送</p>
<p class="text-info">天蓝色字体： 您必须同意条款和条件，才能完成注册过程。</p>
<p class="text-warning">橙黄色字体: 你的网络连接有问题。</p>
<p class="text-danger">红色字体： 提交数据时发生错误</p>
<p class="text-muted">字体变灰，没其它作用</p>
<p class="text-dark">字体变黑</p>

输出如图
在这里插入图片描述

2.5.2缩写文本查看

HTML 元素< abbr>提供缩写或首字母缩写的标记，如WWW或HTTP。Bootstrap样式元素< abbr>，沿底部有一个浅虚线边框，并在悬停时显示全文(只要将该文本添加到标题属性)。要得到稍微小一点的字体大小，在中添加.initialism。（简单点说就是鼠标悬浮在缩写名称上时会显示具体内容。）

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title ="Hyper Text Markup Language" class = "initialism">HTML</abbr>

输出
在这里插入图片描述

2.5.3地址标签

使用< address>标签，您可以在您的web页面上显示联系人信息。因为< address>默认为display: block;你需要使用标签来添加换行符到附加的地址文本。

<address> 
   <strong>超市</strong><br> 
   Shanghai XXXXX<br> 
   <abbr title = "Phone">P:</abbr> 123456
</address> 
 
<address> 
   <strong>Contact Details</strong><br> 
   <a href = "mailto:#">mailto@233.com</a> 
</address>

输出
在这里插入图片描述

2.5.4Blockquotes

设计块外观,只需使用< blockquote>元素定义块，bootstrap的样式表将完成其余的工作。此外，为了标识资料来源，您可以使用类.blockquote-footer添加元素，并将源作品的名称或人物包含在里面，像这样:

 <blockquote class="blockquote"> 
   <p> 
Do not let the behavior of others destroy your inner peace</p> 
   <footer class="blockquote-footer">by  
<cite>Dalai Lama</cite> 
      </footer> 
</blockquote>

输出
在这里插入图片描述

2.5.5List

Bootstrap4提供了各种样式

Unstyled（无样式）：可以通过删除默认的列表样式和左侧空白来显示列表。例如对无序列表使用效果是删除圆点和左边空白,下面输出有效果图.
Inline（内联）：可以使用.list-inline和.list-inlineitem类将所有列表项放在一行中。
Description list alignment （描述列表对齐）：通过.row类中使用< dl>标签可以水平显示术语和描述信息.直接使用和无序列表相似.不同的是描述列表不存在样式.

代码范例

<h2>普通无序列表</h2>
<ul class="row">
    <li >    HTML</li>
    <li >    CSS</li>
    <li >    JavaScript</li>
    <li >    Bootstrap</li>
</ul>

<h2>无样式列表</h2>
<ul class = "list-unstyled">
    <li>    HTML</li>
    <li>    CSS</li>
    <li>    JavaScript</li>
    <li>    Bootstrap</li>
</ul>

<!--内容会水平显示-->
<h2>内联列表</h2>
<ul class = "list-inline">
    <li class = "list-inline-item">HTML</li>
    <li class = "list-inline-item">CSS</li>
    <li class = "list-inline-item">JavaScript</li>
    <li class = "list-inline-item">Bootstarp</li>
</ul>

<h2>Description list alignment</h2>

<dl class = "row">
    <dt class = "col-sm-3">HTML</dt>
    <dd class = "col-sm-9">To define the content of web pages</dd>
    <dt class = "col-sm-3">Bootstrap</dt>
    <dd class = "col-sm-9">To develop responsive web pages</dd>
</dl>

输出结果,需要注意的是,无序列表和有序列表也可以使用网格结构。
在这里插入图片描述

3.bootstrap图像

3.1用Bootstrap样式化图像

使用Bootstrap内置类，可以轻松地对图像进行样式化，例如制作圆角或圆形图像，或给它们提供缩略图等效果。

<!--为图像提供圆角-->
<img src="images/a.png" class="rounded" alt="Rounded Image"> 
<!--将图片塑造为圆形-->
<img src="images/a.png" class="rounded-circle" alt="Circular Image"> 
<!--将图像塑造为缩略图（带边框）-->
<img src="images/a.png" class="img-thumbnail" alt="Thumbnail Image">

输出：
在这里插入图片描述

3.2图像响应

可以通过使用.img-fluid类(提供最大宽度:100%;和height：auto；图像)来创建响应式图片，它会随着浏览器窗口大小的改变而改变。

<img src = "../images/b.jpeg"
     class = "img-fluid"  alt = "Responsive Image"
     width = "1200" height = "1200">

可以自己尝试改变浏览器窗口大小看效果。

你也可以让视频或幻灯片嵌入到网页中，而不影响其原始的长宽比。为此，在< div>元素中包装任何嵌入，如< iframe>或< video>，并应用类.embed-responsive和一个长宽比类，如.embed-responsive-16by9。

<div class="embed-responsive embed-responsive-21by9"> 
               <iframe class="embed-responsive-item"  
src="https:/https://www.csdn.net/"></iframe> 
       </div>

3.3调整图像

图像可以通过使用.float-left类向左移动，通过使用.float-right类向右移动。

<div class="container bg-light" >
    <img src = "../images/a.jpeg"  class = "float-right"
         alt = "Left Image" width = "200" height = "200">
    <img src = "../images/b.jpeg"  class = "float-left"
         alt = "Left Image" width = "200" height = "200">
</div>

输出（左边对应图片b，右边对应图片a）
在这里插入图片描述

3.4bootstrap的图像类

类	描述
.embed-responsive	用于嵌入内容的容器。使视频或幻灯片在任何设备上适当缩放。
.embed-responsive-16by9	用于嵌入内容的容器。创建一个16:9的纵横比嵌入内容
.embed-responsive-3by4	用于嵌入内容的容器。创建一个3:4宽高比的嵌入内容
.embed-responsive-item	.embed-responsive内部使用。将视频很好地缩放到父元素
.img-fluid	响应图像(增加max width:100%和height：auto)
.img-thumbnail	将图像塑造为缩略图(薄浅灰色边框)