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.css
和bootstrap.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技术站