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日

相关文章

  • 响应式布局的简单案例

    响应式布局是指网页能够在不同尺寸屏幕下(例如:电脑、平板、手机)保持一致的显示效果,而不需要设计多个不同的版本。下面是响应式布局的简单案例攻略。 简单案例攻略 步骤一:设置视口(Viewport) 在 HTML 文件的 head 标签中添加以下的代码,它能够确保网页在移动设备上正常显示: <meta name="viewport" …

    css 2023年6月11日
    00
  • JS图片无缝、平滑滚动代码

    JS图片无缝平滑滚动代码是一种常用的实现图片滚动效果的方法。以下是实现该功能的完整攻略: 步骤一:确定HTML结构 首先,需要确定所需的HTML结构。一般来说,图片滚动的容器是一个div标签,里面包含多个img标签。例如: <div class="slider"> <img src="img1.jpg&quot…

    css 2023年6月10日
    00
  • 使用纯 CSS 创作一个渐变色动画边框

    使用纯 CSS 创作一个渐变色动画边框,通常需要遵循以下步骤: Step 1:创建 HTML 元素 首先,在 HTML 中创建一个元素,该元素将作为动画边框的容器,如下所示: <div class="border-container"></div> Step 2:添加样式 接下来,在 CSS 中添加一些样式,为动画…

    css 2023年6月10日
    00
  • 彻底弄明白CSS3的Media Queries(跨平台设计)

    下面就为大家详细讲解“彻底弄明白CSS3的Media Queries(跨平台设计)”的完整攻略。 什么是 Media Queries Media Queries 是 CSS3 中的一个新特性,它允许我们在不同的设备、分辨率以及屏幕方向下,对网页的样式进行不同的设计和呈现。Media Queries 的出现,使得我们可以更加精细的设计网站,让网页在不同的设备上…

    css 2023年6月10日
    00
  • css浮动中避免包含元素高度为0的4种解决方法

    当使用CSS浮动时,有时会遇到元素包含的内容高度为0的情况,这在页面布局中是非常不可避免的。为了解决这个问题,下面介绍四种解决方法。 1. 使用clear属性清除浮动 我们可以使用clear属性清除浮动,强制使元素脱离浮动元素的影响。这个属性有两个取值:left和right,用于清除左侧或右侧的浮动。在需要清除的元素上添加此属性即可。 示例代码 <di…

    css 2023年6月10日
    00
  • CSS list-style-type属性使用方法

    当我们需要给HTML列表元素添加样式时,可以使用CSS的list-style-type属性来实现。这个属性定义了列表项符号的类型,可以用不同的值来改变列表项符号的类型。 常用值 list-style-type属性常用的值包括: none:不显示列表项符号。 disc:默认值,使用实心圆点作为列表项符号。 circle:使用空心圆圈作为列表项符号。 squar…

    css 2023年6月10日
    00
  • 纯css实现立体摆放图片效果的示例代码

    下面是“纯css实现立体摆放图片效果”的攻略。 1. 准备图片资源 首先,在网站目录下准备多张图片资源,作为实现立体效果的图片。图片的格式可以是jpg、png等。 2. 新建html文件 在网站目录下新建一个html文件,以便将来在其中实现立体效果。可以在文件中添加一个div容器。 <!DOCTYPE html> <html> &lt…

    css 2023年6月10日
    00
  • IE6、IE7、IE8浏览器下的CSS、JS兼容性对比

    IE6/IE7/IE8浏览器下的CSS兼容性问题 在现代的浏览器中,我们可以使用最新的CSS属性来创建漂亮的网页,但是在IE6/IE7/IE8等老旧的浏览器中,我们需要注意一些CSS兼容性问题。 盒模型 在标准盒模型(box-sizing: content-box)中,元素的width和height只包括内容的宽和高,但在IE6/IE7/IE8等旧版浏览器中…

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