学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
CSDN 2024-08-13 12:33:04 阅读 64
✨✨ 欢迎大家来到景天科技苑✨✨
🎈🎈 养成好习惯，先赞后看哦~🎈🎈
所属的专栏：前端泛海
景天的主页：景天科技苑
文章目录
Bootstrap1.Bootstrap介绍2.简单使用3.布局容器4.Bootstrap实现轮播图
Bootstrap
Bootstrap官网
1.Bootstrap介绍
一、什么是Bootstrap？
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。
Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架
是一个用于快速开发Web应用程序和网站的前端框架
Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷
概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架
二、为什么要用Bootstrap
因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容易上手。
封装了常用的css样式，js动态效果。直接调用
使用bootstrap的宗旨就是 ctrl c / ctrl v
三、如何使用Bootstrap
1.下载Bootstrap库 https://v4.bootcss.com/(Bootstrap管网)
2.页面中引入库
jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】
bootstrap.css：Bootstrap核心样式【添加到head标签中】
使用最新版
下载
并且提供CDN加速在线引入
解压后包含两个文件夹
不管是css，还是js，带min的都是压缩过的。生产中使用压缩过的
解压后，在项目中引入
2.简单使用
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
适配IE浏览器的edge浏览器
<meta http-equiv="X-UA-Compatible" content="IE=edge">code>
适配手机端，自适应手机屏幕大小，调整分辨率，方便手机观看
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>bootstrap简单使用</title>
<script src="jquery.js"></script>code>
<!-- 引入外部bootstrap样式-->
<link rel="stylesheet" href="bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" />code>
</head>
没做手机屏幕适配之前，很小看不清
做了手机屏幕适配后，等比例缩放，但是这样缩放可能会导致页面显示不完内容。因此这就需要做响应式
我们不用设置任何样式，只需引入bootstrap自带的css样式即可
<code><body>
<table class="table table-hover table-striped">code>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>孙坚</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>王涛</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>王舒展</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>刘亦菲</td>
<td>女</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
浏览器显示效果
<code></html>
3.布局容器
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">code>
<meta name="viewport" content="width=device-width, initial-scale=1">code>
<style>
.c1{
background-color:tan;
height:100px;
}
.c2{
background-color:pink;
height:100px;
}
.c3{
background-color:green;
height:100px;
}
</style>
</head>
<body>
<!-- container-fluid占满整个屏幕 -->
<code><!-- container 左右两边有留白 -->
<code><div class="container-fluid">code>
<div class="row">code>
<!-- // col-md-offset-3 栅格偏移,向右偏移3个栅格的意思-->
<!-- // col-md-6 占6个栅格,默认从左边开始-->
<div class="col-md-6 c1 col-md-offset-3">code>
<div class="row">code>
<div class="col-md-6 c3"></div>code>
</div>
</div>
<!-- <div class="col-md-8 c2"></div>-->code>
</div>
</div>
<!--<div class="container c1"></div>-->code>
栅格单位，铺满是12个栅格，各占6个
如果是占不满，留空白
如果两个加起来超过12个，则第二个换行
新版的栅格偏移，默认从左边开始，设置了栅格偏移可以从指定栅格开始
具体使用方法，可以参照官网使用说明，很详细
缩小屏幕等分，不会换行
<code></body>
<script src="jquery.js"></script>code>
</html>
4.Bootstrap实现轮播图
轮播图必须引入在bootstrap.js之前引入jQuery.js
设置轮播图轮换图片间隔时间，默认是5秒
还可以通过js方法控制轮播时间
轮播图完整代码：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8" />code>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />code>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />code>
<title>轮播图</title>
<script src="jquery.js"></script>code>
<link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css" />code>
<script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>code>
</head>
<body>
<div
id="carouselExampleCaptions"code>
class="carousel slide"code>
data-ride="carousel"code>
>
<ol class="carousel-indicators">code>
<li
data-target="#carouselExampleCaptions"code>
data-slide-to="0"code>
class="active"code>
></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>code>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>code>
</ol>
<div class="carousel-inner">code>
<div class="carousel-item active">code>
<img src="1.jpg" class="d-block w-100" alt="..." />code>
<div class="carousel-caption d-none d-md-block">code>
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">code>
<img src="2.jpg" class="d-block w-100" alt="..." />code>
<div class="carousel-caption d-none d-md-block">code>
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">code>
<img src="3.jpg" class="d-block w-100" alt="..." />code>
<div class="carousel-caption d-none d-md-block">code>
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-prev"code>
type="button"code>
data-target="#carouselExampleCaptions"code>
data-slide="prev"code>
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>code>
<span class="sr-only">Previous</span>code>
</button>
<button
class="carousel-control-next"code>
type="button"code>
data-target="#carouselExampleCaptions"code>
data-slide="next"code>
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>code>
<span class="sr-only">Next</span>code>
</button>
</div>
</body>
<script>
$(".carousel").carousel({
interval: 2000,
});
</script>
</html>
效果，图片轮换播放：
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。