学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

所属的专栏：前端泛海
景天的主页：景天科技苑

文章目录

  • Bootstrap
    • 1.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.简单使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">适配IE浏览器的edge浏览器<meta http-equiv="X-UA-Compatible" content="IE=edge">适配手机端，自适应手机屏幕大小，调整分辨率，方便手机观看 <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bootstrap简单使用</title><script src="jquery.js"></script><!--    引入外部bootstrap样式--><link rel="stylesheet" href="bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" />
</head>

没做手机屏幕适配之前，很小看不清
在这里插入图片描述

做了手机屏幕适配后，等比例缩放，但是这样缩放可能会导致页面显示不完内容。因此这就需要做响应式
在这里插入图片描述

我们不用设置任何样式，只需引入bootstrap自带的css样式即可

在这里插入图片描述

<body><table class="table table-hover table-striped"><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>

浏览器显示效果
在这里插入图片描述

</html>

3.布局容器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><meta name="viewport" content="width=device-width, initial-scale=1"><style>.c1{background-color:tan;height:100px;}.c2{background-color:pink;height:100px;}.c3{background-color:green;height:100px;}</style>
</head>
<body>
<!-- container-fluid占满整个屏幕 -->

在这里插入图片描述
在这里插入图片描述

<!-- container 左右两边有留白 -->

在这里插入图片描述
在这里插入图片描述

<div class="container-fluid"><div class="row">
<!--        //  col-md-offset-3  栅格偏移,向右偏移3个栅格的意思-->
<!--        //  col-md-6 占6个栅格,默认从左边开始--><div class="col-md-6 c1 col-md-offset-3"><div class="row"><div class="col-md-6 c3"></div></div></div>
<!--        <div class="col-md-8 c2"></div>--></div></div>
<!--<div class="container c1"></div>-->

栅格单位，铺满是12个栅格，各占6个
在这里插入图片描述
在这里插入图片描述

如果是占不满，留空白
在这里插入图片描述

如果两个加起来超过12个，则第二个换行
在这里插入图片描述
在这里插入图片描述

新版的栅格偏移，默认从左边开始，设置了栅格偏移可以从指定栅格开始
在这里插入图片描述
在这里插入图片描述

具体使用方法，可以参照官网使用说明，很详细
在这里插入图片描述

缩小屏幕等分，不会换行
在这里插入图片描述

</body>
<script src="jquery.js"></script>
</html>

4.Bootstrap实现轮播图

轮播图必须引入在bootstrap.js之前引入jQuery.js
设置轮播图轮换图片间隔时间，默认是5秒
在这里插入图片描述

还可以通过js方法控制轮播时间
在这里插入图片描述

轮播图完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图</title><script src="jquery.js"></script><link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css" /><script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script></head><body><divid="carouselExampleCaptions"class="carousel slide"data-ride="carousel"><ol class="carousel-indicators"><lidata-target="#carouselExampleCaptions"data-slide-to="0"class="active"></li><li data-target="#carouselExampleCaptions" data-slide-to="1"></li><li data-target="#carouselExampleCaptions" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="1.jpg" class="d-block w-100" alt="..." /><div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Some representative placeholder content for the first slide.</p></div></div><div class="carousel-item"><img src="2.jpg" class="d-block w-100" alt="..." /><div class="carousel-caption d-none d-md-block"><h5>Second slide label</h5><p>Some representative placeholder content for the second slide.</p></div></div><div class="carousel-item"><img src="3.jpg" class="d-block w-100" alt="..." /><div class="carousel-caption d-none d-md-block"><h5>Third slide label</h5><p>Some representative placeholder content for the third slide.</p></div></div></div><buttonclass="carousel-control-prev"type="button"data-target="#carouselExampleCaptions"data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><buttonclass="carousel-control-next"type="button"data-target="#carouselExampleCaptions"data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button></div></body><script>$(".carousel").carousel({interval: 2000,});</script>
</html>

效果，图片轮换播放：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/272837.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

机器学习|KNN和Kmeans

机器学习|KNN和Kmeans

KNN和Kmeans KNN KNN-K个最近的邻居&#xff0c;而K是可人先预设出来的。 所谓近朱者赤&#xff0c;近墨者黑。 可以选取离当前最近的K个样本来作为辅助判断&#xff0c;因为本样本和最近的K个样本应该是处于一种相似的状态。 以下是一个苹果和梨的识别任务。 图上会出现一个未…
阅读更多...
011-keep-alive详解

011-keep-alive详解

keep-alive详解 1、简介2、keep-alive的使用效果未使用keep-alive的效果图使用keep-alive的效果图include和exclude指定是否缓存某些组件使用keep-alive的钩子函数执行顺序问题 3、keep-alive的应用场景举例4、总结 1、简介 keep-alive 是 Vue 的内置组件&#xff0c;当它包裹…
阅读更多...
Elasticsearch架构原理

Elasticsearch架构原理

一. Elasticsearch架构原理 1、Elasticsearch的节点类型 在Elasticsearch主要分成两类节点&#xff0c;一类是Master&#xff0c;一类是DataNode。 1.1 Master节点 在Elasticsearch启动时&#xff0c;会选举出来一个Master节点。当某个节点启动后&#xff0c;然后使用Zen D…
阅读更多...
理清关系简化LeetCode题库第3047题求交集区域内的最大正方形面积问题求解

理清关系简化LeetCode题库第3047题求交集区域内的最大正方形面积问题求解

3047. 求交集区域内的最大正方形面积 难度&#xff1a;中等 问题描述&#xff1a; 在二维平面上存在 n 个矩形。给你两个下标从 0 开始的二维整数数组 bottomLeft 和 topRight&#xff0c;两个数组的大小都是 n x 2 &#xff0c;其中bottomLeft[i]和topRight[i]分别代表第i个…
阅读更多...
爬虫(五)

爬虫(五)

1. 前端JS相关 三元运算 v1 条件 ? 值A : 值B; # 如果条件成立v1值A&#xff0c;不成立v1等于值Bres 1 1 ? 99 : 88 # res99特殊的逻辑运算 v1 11 || 22 # Ture v2 9 || 14 # 9 v3 0 || 15 # 15 v3 0 || 15 || "zhangfei" # 15赋值和…
阅读更多...
Java二叉树 (2)

Java二叉树 (2)

&#x1f435;本篇文章将对二叉树的一些基础操作进行梳理和讲解 一、操作简述 int size(Node root); // 获取树中节点的个数int getLeafNodeCount(Node root); // 获取叶子节点的个数int getKLevelNodeCount(Node root,int k); // 获取第K层节点的个数int getHeight(Node r…
阅读更多...
【Claude3】利用Python中完成对Bedrock上的Claude的API调用

【Claude3】利用Python中完成对Bedrock上的Claude的API调用

文章目录 1. 前期准备工作2. 安装和配置AWS CLI v23. 使用AWS configure命令配置AWS凭据4. 安装访问Bedrock的SDK5. 访问Amazon Bedrock UI6. 订阅Bedrock上的Claude模型7. 通过CLI命令列出所有可用的Claude模型8. 向Claude 3 Sonnet on Bedrock生成文本9. 参考链接 1. 前期准备…
阅读更多...
云原生架构设计：分布式消息队列技术解析

云原生架构设计：分布式消息队列技术解析

消息队列是在消息传输过程中保存消息的容器&#xff0c;消息队列管理器在将消息从源到目标时充当中间人的角色&#xff0c;消息队列的主要目的是提供路由并保证消息的可靠传递。如果发送消息时接收者不可用&#xff0c;那消息队列就会保留消息&#xff0c;直到下次成功消费为止…
阅读更多...
Excel 快速填充/输入内容

Excel 快速填充/输入内容

目录 一. Ctrl D/R 向下/右填充二. 批量输入内容 一. Ctrl D/R 向下/右填充 ⏹如下图所示&#xff0c;通过快捷键向下和向右填充数据 &#x1f914;当选中第一个单元格之后&#xff0c;可以按住Shift后&#xff0c;再选中最后一个单元格&#xff0c;可以选中第一个单元格和最…
阅读更多...
CleanMyMac X4.14.7永久免费Mac电脑清理和优化软件

CleanMyMac X4.14.7永久免费Mac电脑清理和优化软件

CleanMyMac X 是一款功能强大的 Mac 清理和优化软件&#xff0c;适合以下几类人群使用&#xff1a; 需要定期清理和优化 Mac 的用户&#xff1a;随着时间的推移&#xff0c;Mac 设备上可能会积累大量的无用文件、缓存和垃圾&#xff0c;导致系统运行缓慢。CleanMyMac X 的智能扫…
阅读更多...
DataLoader

DataLoader

import torchvision from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriter# 准备的测试数据集 数据放在了CIFAR10文件夹下test_data torchvision.datasets.CIFAR10("./CIFAR10",trainFalse, transformtorchvision.transfor…
阅读更多...
React useMemo钩子指南：优化计算性能

React useMemo钩子指南：优化计算性能

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
【解读】OWASP大语言模型应用程序十大风险

【解读】OWASP大语言模型应用程序十大风险

OWASP大型语言模型应用程序前十名项目旨在教育开发人员、设计师、架构师、经理和组织在部署和管理大型语言模型&#xff08;LLM&#xff09;时的潜在安全风险。该项目提供了LLM应用程序中常见的十大最关键漏洞的列表&#xff0c;强调了它们的潜在影响、易利用性和在现实应用程序…
阅读更多...
[Spring] IoC 控制反转和DI依赖注入和Spring中的实现以及常见面试题

[Spring] IoC 控制反转和DI依赖注入和Spring中的实现以及常见面试题

目录 1. 什么是Spring 2.什么是IoC容器 3.通过实例来深入了解IoC容器的作用 3.1造一量可以定义车辆轮胎尺寸的车出现的问题 3.2解决方法 3.3IoC优势 4.DI介绍 5.Spring中的IoC和DI的实现 5.1.存对象 5.1.2 类注解 5.1.3 方法注解 5.2取对像 (依赖注入) 5.2.1.属性…
阅读更多...
如何使用Hexo搭建个人博客

如何使用Hexo搭建个人博客

文章目录 如何使用Hexo搭建个人博客环境搭建连接 Github创建 Github Pages 仓库本地安装 Hexo 博客程序安装 HexoHexo 初始化和本地预览 部署 Hexo 到 GitHub Pages开始使用发布文章网站设置更换主题常用命令 插件安装解决成功上传github但是web不更新不想上传文章处理方式链接…
阅读更多...
复盘-word

复盘-word

word-大学生网络创业交流会 设置段落&#xff0c;段后行距才有分 word-选中左边几行字进行操作 按住alt键进行选中 word复制excel随excel改变&#xff08;选择性粘贴&#xff09; 页边距为普通页边距定义 ##### word 在内容控件里面填文字&#xff08;调属性&#xff09…
阅读更多...
BC134 蛇形矩阵

BC134 蛇形矩阵

一&#xff1a;题目 二&#xff1a;思路分析 2.1 蛇形矩阵含义 首先&#xff0c;这道题我们要根据这个示例&#xff0c;找到蛇形矩阵是怎么移动的 这是&#xff0c;我们可以标记一下每次移动到方向 我们根据上图可以看出&#xff0c;蛇形矩阵一共有两种方向&#xff0c;橙色…
阅读更多...
LLM 推理优化探微 (2) ：Transformer 模型 KV 缓存技术详解

LLM 推理优化探微 (2) ：Transformer 模型 KV 缓存技术详解

编者按&#xff1a;随着 LLM 赋能越来越多需要实时决策和响应的应用场景&#xff0c;以及用户体验不佳、成本过高、资源受限等问题的出现&#xff0c;大模型高效推理已成为一个重要的研究课题。为此&#xff0c;Baihai IDP 推出 Pierre Lienhart 的系列文章&#xff0c;从多个维…
阅读更多...
模板不存在:./Application/Home/View/OnContact/Index.html 错误位置

模板不存在:./Application/Home/View/OnContact/Index.html 错误位置

模板不存在:./Application/Home/View/OnContact/Index.html 错误位置FILE: /home/huimingdedhpucixmaihndged5e/wwwroot/ThinkPHP123/Library/Think/View.class.php 　LINE: 110 TRACE#0 /home/huimingdedhpucixmaihndged5e/wwwroot/ThinkPHP123/Library/Think/View.class.php(…
阅读更多...
Flutter 开发环境搭建-VS Code篇

Flutter 开发环境搭建-VS Code篇

1.准备环境 Java SDK 下载及安装Flutter SDK 安装及配置环境变量 下载地址将flutter sdk解压目录下的bin目录放到系统环境变量中 检查环境&#xff0c;在系统终端中输入&#xff1a; # 打印flutter sdk版本号 flutter --version# 检查flutter运行环境 flutter doctor第一次运…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023