bootstrap学习笔记之初识bootstrap

Bootstrap学习笔记之初识Bootstrap

什么是Bootstrap

Bootstrap是一个基于HTML、CSS、JavaScript的前端开发框架,由Twitter公司的Mark Otto和Jacob Thornton创建并维护。Bootstrap通过提供一系列基础模板、CSS规则和JavaScript插件等,可以轻松帮助开发者构建响应式、移动端优化的网站和Web应用。

Bootstrap的导入方式

Bootstrap有两种导入方式,分别是CDN和本地导入。

CDN导入

在HTML文件中的<head>中引入以下代码:

<!-- 最新版本的Bootstrap,来自官方CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<!-- 最新版本的JavaScript,来自官方CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

本地导入

将下载好的Bootstrap文件夹中的bootstrap.min.cssbootstrap.min.js文件放入项目文件夹中,然后在HTML文件中的<head>中引入以下代码:

<!-- 引入本地的BootstrapCSS文件 -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<!-- 引入本地的BootstrapJS文件 -->
<script src="./bootstrap/js/bootstrap.min.js"></script>

Bootstrap的基础结构

Bootstrap的基础结构为一个网格系统,其中网格分为12列。开发者可以利用这个网格系统来构建自己的布局。

以下是一个简单的网格布局示例:

<div class="container">
  <div class="row">
    <div class="col-md-4">第一列</div>
    <div class="col-md-4">第二列</div>
    <div class="col-md-4">第三列</div>
  </div>
</div>

其中,container用于创建一个包围内容的区域,并且为开发者提供默认的外边距和填充。row用于创建一行,每一行可以包含多个列。col-md-4用于创建一个列,md表示当设备为中等大小的屏幕时,列的宽度为4。

Bootstrap的常用组件

Navbar组件

Navbar组件是Bootstrap中用来创建导航栏的组件,可以通过以下代码创建一个基本的导航栏:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">首页</a>
        <a class="nav-link" href="#">产品</a>
        <a class="nav-link" href="#">服务</a>
        <a class="nav-link" href="#">关于</a>
      </div>
    </div>
  </div>
</nav>

其中,navbar表示创建一个导航栏。navbar-expand-lg表示在屏幕宽度大于等于lg(大屏幕)时,导航栏将占据整个屏幕宽度。navbar-light bg-light表示导航栏为浅色背景。navbar-brand用于创建网站名称。navbar-toggler表示创建一个用于展开导航栏的按钮,当屏幕尺寸小于一定大小时,导航栏默认会折叠,点击该按钮可以展开导航栏。navbar-collapse用于指定要折叠的内容,navbar-nav用于创建一个用于包含导航链接的容器。

Card组件

Card组件是Bootstrap中用于创建卡片式布局的组件,可以通过以下代码创建一个基本的卡片:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片正文</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

其中,card表示创建一个卡片。card-img-top用于设置卡片的顶部图片。card-body用于创建一个卡片主体,并包含标题、正文和按钮。card-title用于设置卡片的标题。card-text用于设置卡片的正文。btn用于创建一个按钮,btn-primary表示该按钮为蓝色按钮。

结语

本文介绍了Bootstrap的导入方式、基础结构以及常用组件。Bootstrap是一个十分强大的前端框架,可以帮助开发者快速构建响应式、移动端优化的网站和Web应用。如果需要更加深入地学习Bootstrap,可以查看Bootstrap官方文档。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:bootstrap学习笔记之初识bootstrap - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • HTML设计模式日常学习笔记整理

    HTML设计模式日常学习笔记整理 什么是HTML设计模式? HTML设计模式是用于解耦HTML和CSS的一种技术。通过将网页设计划分为多个模块,每个模块负责不同的功能和样式,从而达到可复用性和可维护性的目的。同时,这种技术能够增加代码的可读性,便于多人协作开发和代码重构。 实践攻略 第一步:制定设计方案 在进行HTML设计模式开发前,需要先进行设计方案的制定…

    css 2023年6月10日
    00
  • css body背景图全屏不论分辨率大小

    要实现“CSS body背景图全屏不论分辨率大小”的效果,需要遵循以下步骤: 步骤一:准备背景图片 首先,需要准备一张适当尺寸的背景图片,并把它保存到网站目录下。 步骤二:设置body的样式 接下来,需要设置 body 元素的样式。对于这个问题,不能简单地使用 body { background-image: url(‘bg.jpg’); } 就算完成任务,…

    css 2023年6月9日
    00
  • 用CSS遮罩实现过渡效果的示例代码

    下面是“用CSS遮罩实现过渡效果的示例代码”的完整攻略: 一、什么是CSS遮罩? CSS遮罩是一种技术,可以将遮罩层放在页面元素上,以此来实现一些特殊的效果,比如磨砂玻璃效果、蒙版遮罩等。在CSS3中,我们可以使用“mask-image” property来设置遮罩,其支持一些图像和线性渐变的设置。 二、如何使用CSS遮罩实现过渡效果? 使用CSS遮罩实现过…

    css 2023年6月9日
    00
  • CSS3 3D旋转rotate效果实例介绍

    对于“CSS3 3D旋转rotate效果实例介绍”,我将给出完整的攻略,具体如下: 1. 什么是CSS3 3D旋转rotate效果 CSS3中的的3D旋转旋转变换可以通过rotateX,rotateY,rotateZ 和rotate3d(deg,x,y,z)四种方法来实现。一般我们最常使用的是rotateX,rotateY,rotateZ 三种属性。 2. …

    css 2023年6月10日
    00
  • CSS 快速提升设计可读性和维护性

    请跟我来,下面是详细讲解CSS快速提升设计可读性和维护性的攻略: 1. 确立统一的样式规范 在编写CSS样式表的时候,我们需要先定义统一的样式规范。这样做可以提高代码的可读性,并且在维护代码时也会更加方便。 比如,我们可以指定文字的默认字体、字号、颜色等属性,使得整个网站的文字都具有统一的样式。同时,我们还可以创建一些class或者id,来对某些元素进行特殊…

    css 2023年6月10日
    00
  • 分享那些Web设计大神们常用的响应式框架(小结)

    分享那些Web设计大神们常用的响应式框架(小结) 在Web设计领域,响应式设计已经成为一种必备的能力。而响应式框架的出现,使得响应式设计的实现更加便捷和高效。在这篇文章中,我们将介绍一些Web设计大神常用的响应式框架。 一、Bootstrap Bootstrap是目前为止最流行的响应式框架之一,它完全开源且免费。由Twitter开发,具有Sass插件、基础的…

    css 2023年6月11日
    00
  • 利用Vue实现卡牌翻转的特效

    对于“利用Vue实现卡牌翻转的特效”的完整攻略,我将为您提供以下的步骤和示例: 第一步:创建Vue组件 首先,我们需要创建一个Vue组件,该组件将负责显示我们的卡牌,并在翻转过程中改变显示内容。组件代码如下: <template> <div class="card" :class="{flipped: isFl…

    css 2023年6月11日
    00
  • 使用font-size:0 来去掉inline-block元素之间的空隙方法

    使用 font-size: 0 可以去掉 inline-block 元素之间产生的多余空隙,其原理是把元素内的空格和换行符等字符变成了 0 大小,从而实现消除多余间隙的效果。下面是方法的完整攻略: 1. 在包含元素上添加样式 可以在包含多个 inline-block 元素的容器上添加 font-size: 0 样式。这种方法的缺点是,如果容器中有文字内容,也…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部