Bootstrap框架

最新推荐文章于 2024-06-01 00:10:59 发布

乖巧乐芬达

最新推荐文章于 2024-06-01 00:10:59 发布

阅读量460

点赞数 1

分类专栏： Python Web开发从入门到精通文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/weixin_52470573/article/details/125814614

版权

Python Web开发从入门到精通专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Bootstrap是全球最受欢迎的前端组件库，用于响应式布局、移动设备优先的Web项目。利用Sass变量、大量mixin、响应式格栅系统、可扩展的预制组件以及基于jQuery的强大的插件系统，能够快速开发出应用原型或者构建整个APP。

Bootstrap的引用

Bootstrap 4的基本应用

Bootstrap的引用

与jQuery的引用类似，Bootstrap的引用可以通过以下两种方式来安装Bootstrap。

1、使用Bootstrap CDN。

示例：复制如下的<link>样式表，粘贴到网页的<head>里面，并放在其他CSS文件之前。（CSS文件）

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

全局组件运行在jQuery组件上，其中包括Popper.js和系统内置JavaScript插件。所以先引入Jquery.js，以防出现问题。（JS文件）

例如：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

2、下载bootstrap 4

访问Bootstrap官网，进入下载页面，下载Bootstrap 4。下载完成后解压文件，并将解压后的文件复制到项目目录，如下引用即可。

（CSS文件）

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

（JS文件）

<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>

（注：jquery.js和popper.js两个文件，需要单独下载。）

Bootstrap 4的基本应用

首先到Bootstrap官网中查找自己需要的组件效果，复制后，粘贴在自己的项目中，再修改一些参数即可。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
<!-- 导航栏组件 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">页面一</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">页面二</a>
    </li>
    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#"
          id="navbardrop" data-toggle="dropdown">
        搜索引擎
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="https://www.baidu.com/">百度</a>
        <a class="dropdown-item" href="https://cn.bing.com/">必应</a>
      </div>
    </li>
  </ul>
</nav>
</body>
</html>

乖巧乐芬达

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap框架

Bootstrap是全球最受欢迎的前端组件库，用于响应式布局、移动设备优先的Web项目。利用Sass变量、大量mixin、响应式格栅系统、可扩展的预制组件以及基于jQuery的强大的插件系统，能够快速开发出应用原型或者构建整个APP。...
复制链接

扫一扫

专栏目录