移动Web——Bootstrap

1、Bootstrap-简介

Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果

<!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>体验Bootstrap</title>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-6 col-sm-12">1</div>
      <div class="col-lg-3 col-md-6 col-sm-12">1</div>
      <div class="col-lg-3 col-md-6 col-sm-12">1</div>
      <div class="col-lg-3 col-md-6 col-sm-12">1</div>
    </div>
  </div>
</body>
</html>

 2、Bootstrap-下载

 中文官网：

Bootstrap中文网 (bootcss.com)

使用步骤：

1.下载：Bootstrap V5中文文档 ---> 进入中文文档 ---> 下载 ---> 下载 Bootstrap 生产文件

2.使用步骤

（1）引入Bootstrap CSS文件

（2）调用类名：container：响应式布局版心类

<!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>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  <style>
    div {
      height: 50px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="container">1</div>
</body>
</html>

3、Bootstrap栅格系统

栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占3份即可（12 / 4 = 3）

6个响应区间 

 

常用布局类

  • col-*-*：列（例如：col-xxl-3）
  • row：行 
<!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>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head>
<body>
  <!-- 
    视口宽度大于等于1200px，一行排4个盒子 → 3
    视口宽度大于等于768px，一行排2个盒子
    视口宽度大于等于576px，一行排1个盒子
   -->
   <!-- 版心 → row → 子级 -->
   <div class="container">
    <div class="row">
      <div class="col-xl-3 col-md-6 col-sm-12">1</div>
      <div class="col-xl-3 col-md-6 col-sm-12">2</div>
      <div class="col-xl-3 col-md-6 col-sm-12">3</div>
      <div class="col-xl-3 col-md-6 col-sm-12">4</div>
    </div>
   </div>
</body>
</html>

4、Bootstrap-全局样式

4.1 button类

Button类

  • btn：默认样式
  • btn-success：成功
  • btn-warning：警告
  • ……
  • 按钮尺寸：btn-lg / btn-sm

<!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>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-success btn-sm">按钮1</button>
  <button class="btn btn-warning btn-lg">按钮2</button>
</body>
</html>

 4.2 表格类

  • table：默认样式
  • table-striped：隔行变色
  • table-success：表格颜色
  • ……

<!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>
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  </head>
  <body>
    <table class="table table-striped table-hover">
      <tr class="table-success">
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>20</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>20</td>
        <td>女</td>
      </tr>
    </table>
  </body>
</html>

4.3 Bootstrap-组件（Components）

  1. 引入样式表
  2. 引入js文件
  3. 复制结构，修改内容
<!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>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  <style>
    .bg-body-tertiary {
      background-color: pink !important;
    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" 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>
          <li class="nav-item">
            <a class="nav-link" href="#">视频</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 轮播图 -->
  <div id="carouselExampleIndicators" class="carousel slide">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="./images/banner_1.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="./images/banner_2.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="./images/banner_3.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="./images/banner_4.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

  <script src="./Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

4.4 Bootstrap-字体图标

下载：

使用：

  1. 复制fonts文件夹到项目目录
  2. 网页引入bootstrap-icons.css文件
  3. 调用CSS类名（图标对应的类名）
<!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>
    <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
    <style>
      .bi-android2 {
        font-size: 100px;
        color: green;
      }
    </style>
  </head>
  <body>
    <span class="bi-android2"></span>
  </body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

上海亚商投顾：成交量突破万亿 沪指重回2800

上海亚商投顾：成交量突破万亿 沪指重回2800

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 昨日A股三大指数延续上涨&#xff0c;深成指领涨&#xff0c;沪指重新站上2800点。不过&#xff0c;指数黄白分…
阅读更多...
MATLAB环境下基于深层小波时间散射网络的ECG信号分类

MATLAB环境下基于深层小波时间散射网络的ECG信号分类

2012年&#xff0c;法国工程学院院士Mallat教授深受深度学习结构框架思想的启发&#xff0c;提出了基于小波变换的小波时间散射网络&#xff0c;并以此构造了小波时间散射网络。 小波时间散射网络的结构类似于深度卷积神经网络&#xff0c;不同的是其滤波器是预先确定好的小波…
阅读更多...
从源码学习访问控制符使用

从源码学习访问控制符使用

从源码学习访问控制符使用 Java中的访问控制符 ​ 在Java中&#xff0c;有四个访问控制符&#xff1a;public、protected、default&#xff08;默认或缺省&#xff0c;不使用关键字&#xff09;和private。 ​ 它们的访问范围如下&#xff1a; public&#xff1a;公共访问权…
阅读更多...
【人工智能】人工智能 – 引领未来科技的潮流

【人工智能】人工智能 – 引领未来科技的潮流

写在前面 引言红利挑战结论 引言 人工智能是指使计算机系统表现出类似于人类智能的能力。其目标是实现机器具备感知、理解、学习、推理和决策等智能行为。人工智能的发展可以追溯到上世纪50年代&#xff0c;随着计算机技术和算法的不断进步&#xff0c;人工智能得以实现。 今天…
阅读更多...
『运维备忘录』之 Kubernetes（K8S） 常用命令速查

『运维备忘录』之 Kubernetes（K8S） 常用命令速查

一、简介 kubernetes&#xff0c;简称K8s&#xff0c;是用8代替名字中间的8个字符“ubernete”而成的缩写&#xff0c;是一个开源的&#xff0c;用于管理云平台中多个主机上的容器化的应用。kubernetes是基于容器技术的分布式架构解决方案&#xff0c;具有完备的集群管理能力&a…
阅读更多...
今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 2月8日，星期四

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 2月8日，星期四

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年2月8日 星期四 农历腊月廿九 1、 气象局&#xff1a;南方地区雨雪冰冻天气趋于结束&#xff0c;需警惕融雪融冰引发的次生灾害。 2、 应急管理部&#xff1a;1月各种自然灾害共造成228.9万人次不同程度受灾&#xff0c;直…
阅读更多...
网络套件字（理论知识）

网络套件字（理论知识）

一、源IP地址和目的IP地址 上次说到IP地址是为了是为了让信息正确的从原主机传送到目的主机&#xff0c;而原IP地址和目的IP地址就是用于标识两个主机的&#xff0c;既然叫做地址必然有着路径规划的作用&#xff0c;而路径规划最重要的就是&#xff0c;从哪来到哪去&#xff0…
阅读更多...
计算机毕业设计 | SSM超市进销存管理系统(附源码)

计算机毕业设计 | SSM超市进销存管理系统(附源码)

1&#xff0c;绪论 1.1 开发背景 世界上第一个购物中心诞生于美国纽约&#xff0c;外国人迈克尔库伦开设了第一家合作商店&#xff0c;为了更好地吸引大量客流量&#xff0c;迈克尔库伦精心设计了低价策略&#xff0c;通过大量进货把商品价格压低&#xff0c;通过商店一次性集…
阅读更多...
论文封面下划线总是对不齐，这3步你肯定没做!

论文封面下划线总是对不齐，这3步你肯定没做!

论文封面 在写论文时&#xff0c;总会遇到论文封面下划线对不齐&#xff0c;学会下面这三招轻松搞定封面。 解决方法 ①选中文字&#xff0c;点击“插入”&#xff0c;选择“表格”&#xff0c;找到“文本转化为表格”。列数为2&#xff0c;文字分割位置选空格&#xff0c;设置…
阅读更多...
路由器如何映射端口映射？

路由器如何映射端口映射？

在现代互联网中&#xff0c;随着网络应用的不断发展&#xff0c;很多用户需要进行远程访问或搭建服务器来满足自己的需求。由于网络安全的原因&#xff0c;直接将内网设备暴露在公网中是非常危险的。为了解决这个问题&#xff0c;路由器映射端口映射技术应运而生。本文将介绍什…
阅读更多...
Python进阶--爬取美女图片壁纸(基于回车桌面网的爬虫程序)

Python进阶--爬取美女图片壁纸(基于回车桌面网的爬虫程序)

目录 一、前言 二、爬取下载美女图片 1、抓包分析 a、分析页面 b、明确需求 c、抓包搜寻 d、总结特点 2、编写爬虫代码 a、获取图片页网页源代码 b、提取所有图片的链接和标题 c、下载并保存这组图片 d、 爬取目录页的各种类型美女图片的链接 e、实现翻页 三、各…
阅读更多...
HACKTHEBOX通关笔记——mango（退役）

HACKTHEBOX通关笔记——mango（退役）

信息收集 端口扫描 ┌──(root㉿kali)-[~] └─# nmap -sC -sV -A -p- --min-rate10000 10.129.229.185 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-01-31 20:44 EST Warning: 10.129.229.185 giving up on port because retransmission cap hit (10). Nmap scan …
阅读更多...
秘塔科技推出AI搜索产品「秘塔AI搜索」

秘塔科技推出AI搜索产品「秘塔AI搜索」

近日&#xff0c;国内一家人工智能科技公司&#xff08;秘塔科技&#xff09;推出了一款AI搜索产品——秘塔AI搜索&#xff0c;能够大幅提升搜索效率&#xff0c;解决日常生活、工作学习等场景中遇到的各类搜索需求。 秘塔AI搜索官网&#xff1a;https://metaso.cn/ 相较于传统…
阅读更多...
《小狗钱钱2》读书笔记

《小狗钱钱2》读书笔记

目录 前言 作者简介 经典语句摘录 前言 尽管[ 智慧是无法传授的], 但读书可以启发思路&#xff0c;开拓解题方法。 《小狗钱钱2》这本书是在《小狗钱钱》的基础上&#xff0c;作业进一步阐述了关于人生出生的智慧。 当然了&#xff0c;这本书感觉更适合成年人来看&#xff0…
阅读更多...
【集合系列】Map 双列集合

【集合系列】Map 双列集合

Map双列集合 1. 概述2. 方法3. 代码示例4. 输出结果5. 注意事项 实现类&#xff1a; HashTable、HashMap、TreeMap、Properties、LinkedHashMap 其他集合类 具体信息请查看 API 帮助文档 1. 概述 Map是Java中的一种数据结构&#xff0c;用于存储键值对&#xff08;key-value p…
阅读更多...
LayUI中表格树折叠 --

LayUI中表格树折叠 --

1、先将插件源码进行下载&#xff0c;新建 tableTree.js 文件&#xff0c;将源码放进去 2、将 tableTree.js 文件 配置之后&#xff0c;在需要使用的页面进行引入&#xff1a; layui.define(["tableTree"],function (exports) {var tableTree layui.tableTree;// …
阅读更多...
JavaScript相关（四）——事件循环

JavaScript相关（四）——事件循环

参考&#xff1a; 极客时间-消息队列和事件循环 js中的宏任务与微任务 javascript是单线程的原因是什么 JS是单线程语言&#xff0c;在浏览器执行渲染进程时&#xff0c;会遇到很多不同的事件类型&#xff0c;比如操作DOM节点、计算样式布局、执行JS任务、用户输入等&#xff…
阅读更多...
Transformer实战-系列教程13：DETR 算法解读

Transformer实战-系列教程13：DETR 算法解读

&#x1f6a9;&#x1f6a9;&#x1f6a9;Transformer实战-系列教程总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 点我下载源码 1、物体检测 说到目标检测你能想到什么 faster-rcnn系列&#xff0c;开山之作&…
阅读更多...
【Spring Boot】第二篇 自动装配原来就这么简单

【Spring Boot】第二篇 自动装配原来就这么简单

导航 一. 什么是自动装配?二. 如何实现自动装配?1. 配置清单在哪里?2. 自动装配实现核心点1: 从META‐INF/spring.factories路径读取配置类清单核心点2: 过滤第一次过滤: 根据EnableAutoConfiguration注解中exclude和excludeName属性第二次过滤: 通过AutoConfigurationImpor…
阅读更多...
【学网攻】 第(23)节 -- PPP协议

【学网攻】 第(23)节 -- PPP协议

系列文章目录 目录 系列文章目录 文章目录 前言 一、PPP协议是什么&#xff1f; 二、实验 1.引入 实验目的 实验背景你是某公司的网络管理员&#xff0c;现在需要与另一个公司进行通信,需要你配置PPP协议保证双方发送的人是真正的而非黑客 技术原理 实验步骤新建Pack…
阅读更多...
最新文章

Copyright @ 2022~2023