BootStrap详解

Bootstrap简介

什么是BootStrap?

  • BootStrap来自Twitter,是目前最受欢迎的响应式前端框
  • Bootstrap是基于HTML、CSS、JavaScript的,它简洁灵活,使得Web开发更加快捷

为什么使用Bootstrap?

  • 移动设备优先:自Bootstrap3起,框架包含了贯穿于整个库移动设备优先的样式。
 - 不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中
 - 也就是说,针对移动设备的样式融合进了框架的每个角度,而不是增加一个额外的文件
  • 浏览器支持:所有的主流浏览器支持Bootstrap
  • 容易上手:只要您具备HTML和CSS基础知识,您就可以开始学习Bootstrap
  • 响应式设计:Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机
  • 它为开发人员创建接口提供了一个简洁统一的解决方案
  • 它包含了功能强大的内置组件、易于定制
  • 它还提供了基于Web的定制
  • 它是开源的

下载与使用

中文官网:https://www.bootcss.com/
英文官网:http://getbootstrap.com

Bootstrap初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body style="padding: 100px;">
    <h1>Hello,bootstrap</h1>
    <button class="btn btn-primary">学习充电</button>
    <button class="btn btn-success">极速入职</button>
</body>
</html>

Bootstrap的使用

表格

和之前的表格相比,标签更丰富更加语义化,效果更加美观

丰富的表格

  • < table>为表格添加基础样式
  • < thead>表格 表格行 的容器元素(< tr>)
  • < tbody>表格主体的表格行的容器元素(< tr>)
  • < tr>表格行
  • < td>默认的表格单元格
  • < th>特殊的表格单元格,(居中和加粗的效果)。必须在< thead>内使用
  • < caption>关于表格存储内容的描述或总结

好看的类样式

  • .table为任意< table>添加基本样式(只有横向分割线)
  • .table-striped 在< tbody>内添加斑马线形式的条纹(IE8不支持),隔行变色
  • .table-bordered为所有表格的单元格添加边框
  • .table-hover在< tbody>内的任一行启用鼠标悬停状态,鼠标悬停高亮突出显示
  • .table-condensed让表格更加紧凑

情景色类样式

适合应用在< th>、< tr> 、< td>

  • table-active激活效果(悬停颜色)
  • table-success表示成功或积极的动作
  • table-info表示普通的提示信息或动作
  • table-warning表示警告或需要用户注意
  • table-danger表示危险或潜在的带来的负面影响的动作

响应式表格

表格的父元素设置响应式,小于768px,出现边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.js"></script>
</head>
<body>
    <table class="table table-bordered table-hover table-condensed">
        <caption>经营产品大全</caption>
        <thead>
            <tr>
                    <th>产品</th>
                    <th>付款日期</th>
                    <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-active">
                <td>产品1</td>
                <td>2024-1-1</td>
                <td>待发货</td>
            </tr>
            <tr class="table-success">
                <td>产品2</td>
                <td>2024-1-2</td>
                <td>已发货</td>
            </tr>
            <tr class="table-info">
                <td>产品3</td>
                <td>2024-1-3</td>
                <td>已发货</td>
            </tr>
            <tr class="table-warning">
                <td>产品4</td>
                <td>2024-1-4</td>
                <td>已退货</td>
            </tr>
            <tr class="table-danger">
                <td>产品5</td>
                <td>2024-1-6</td>
                <td>已退款</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

表单

表单布局

默认布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;">
    <form>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入你的邮箱">
          </div>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入你的密码">
          </div>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
    </form>
</body>
</html>

表单控件

  • 输入框
    在这里插入图片描述
  <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入你的邮箱">
        </div>
  • 文本框
    在这里插入图片描述
 <div class="mb-3">
            <label for="">文本框</label>
            <textarea class="form-control" id="" cols="30" rows="5"></textarea>
        </div>
  • 复选框

1.默认:form-check
在这里插入图片描述

 <div class="form-check">
            <label>
                <input type="checkbox">1
            </label>
        </div>

        <div class="form-check">
            <label>
                <input type="checkbox">2
            </label>
        </div>

2.内联:form-check-inline

在这里插入图片描述

 <div class="form-check form-check-inline">
            <label>
                <input type="checkbox">3
            </label>
        </div>

        <div class="form-check form-check-inline">
            <label>
                <input type="checkbox">4
            </label>
        </div>
  • 复选按钮
    在这里插入图片描述
 <div class="btn-group" data-toggle="buttons">
            <input type="checkbox" class="btn-check" id="btn-check-1" autocomplete="off">
            <label class="btn btn-primary" for="btn-check-1">音乐</label>
            <input type="checkbox" class="btn-check" id="btn-check-2" autocomplete="off">
            <label class="btn btn-primary" for="btn-check-2">体育</label>
            <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off">
            <label class="btn btn-primary" for="btn-check-3">美术</label>
            <input type="checkbox" class="btn-check"  id="btn-check-4"autocomplete="off">
            <label class="btn btn-primary" for="btn-check-4">电脑</label>
        </div>
  • 单选框
    在这里插入图片描述
 <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
            <label class="form-check-label" for="exampleRadios1"></label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
            <label class="form-check-label" for="exampleRadios2"></label>
          </div>

在这里插入图片描述

 <div class="form-check-inline">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
            <label class="form-check-label" for="exampleRadios1"></label>
          </div>
          <div class="form-check-inline">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
            <label class="form-check-label" for="exampleRadios2"></label>
          </div>
  • 单选按钮
    在这里插入图片描述
 <div class="btn-group" data-toggle="buttons">
            <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked="">
            <label class="btn btn-primary" for="option1"></label>
            
            <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
            <label class="btn btn-primary" for="option2"></label>
        </div>

按钮

在这里插入图片描述

 <button type="button" class="btn btn-primary">primary</button>
    <button type="button" class="btn btn-secondary">secondary</button>
    <button type="button" class="btn btn-success">success</button>
    <button type="button" class="btn btn-danger">danger</button>
    <button type="button" class="btn btn-warning">warning</button>
    <button type="button" class="btn btn-info">info</button>
    <button type="button" class="btn btn-light">light</button>
    <button type="button" class="btn btn-dark">dark</button>

  • 按钮大小

在这里插入图片描述

<button type="button" class="btn btn-primary btn-lg">超大按钮</button>
    <button type="button" class="btn btn-primary">大按钮</button>
    <button type="button" class="btn btn-primary btn-sm">小按钮</button>
  • 按钮状态

disabled通过将布尔属性添加到任何元素,使按钮看起来不活动。已应用禁用按钮pointer-events: none,防止触发悬停和活动状态。

在这里插入图片描述

<button type="button" class="btn btn-primary" disabled>Primary button</button>
    <button type="button" class="btn btn-secondary" disabled>Button</button>
    <button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
    <button type="button" class="btn btn-outline-secondary" disabled>Button</button>

分页在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;">
    <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;">
    <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item"><a class="page-link" href="#">Previous</a></li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
      </nav>
</body>
</html>

下拉菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;">
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown button
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;">
    <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
      
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="padding: 100px;">
    <!-- Example single danger button -->
<div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Action
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</body>
</html>

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

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

相关文章

python学习笔记----判断语句(三)

一、布尔类型和比较运算符 1.1 布尔类型的字面量&#xff1a; True 表示真False 表示假 定义变量存储布尔类型数据&#xff1a; 变量名 布尔类型字面量 bool_1 True bool_2 False1.2 比较运算符 二、 if语句的基本格式 if 要判断的条件:条件成立时&#xff0c;要做的事…

【3GPP IAB】 3GPP支持IAB架构概述

1 概述 IAB用于回传链路的无线传输&#xff0c;对于NR高频尤其重要&#xff0c;3GPP协议讨论了IAB的可能架构和部署方式&#xff0c;一起来看看吧。 2 IAB 功能和接口 IAB尽量重用为接入定义的现有功能和接口。特别是&#xff0c;移动终端(MT)、gNB- DU、gNB- CU、UPF、AMF和S…

DFR初识

【0】前言 【1】什么Web的开发模式 web开发模式 目前主流的web开发模式有两种&#xff1a; 基于服务端渲染的传统web开发模式 - -前后端混合&#xff1a;BBS项目&#xff0c;图书管理系统-模板语言&#xff1a;dtl-flask&#xff0c;fastapi-go gin-vue&#xff0c;react-微信…

Stylus 精讲:掌握这款 CSS 预处理器,让你的样式编写提升到新境界!

Stylus 是一种先进的 CSS 预处理器&#xff0c;它允许你使用更加强大和优雅的方式来编写 CSS。Stylus 拥有很多现代语言所具有的特性&#xff0c;如混合&#xff08;Mixins&#xff09;、函数、条件语句等&#xff0c;这些特性使得 CSS 的编写变得更加灵活和高效。Stylus 还支持…

如何用OceanBase的 Load Data 导入CSV文件

0 前言 CSV文件&#xff08;Comma-Separated Values&#xff0c;字符分隔值&#xff09;是一种普遍采用的数据存储格式&#xff0c;有不少企业和机构都用它来进行数据的管理和存储。身为开发者&#xff0c;您可能经常遇到这样的需求&#xff1a;需要将CSV的数据导入OceanBase数…

信创需求激增,国产服务器操作系统赋能数字化转型

信创&#xff0c;即信息技术应用创新&#xff0c;是指在关键领域和环节推进信息技术的自主创新&#xff0c;构建安全可控的信息技术体系。随着数字化转型的加速&#xff0c;信创需求激增&#xff0c;国产服务器操作系统在其中扮演着至关重要的角色。国产服务器操作系统如何赋能…

使用Pandas从Excel文件中提取满足条件的数据并生成新的文件

目录 一、引言 二、环境准备 三、读取Excel文件 四、数据筛选 五、保存为新的Excel文件 六、案例与代码总结 七、进阶用法与注意事项 八、结语 在数据处理的日常工作中&#xff0c;我们经常需要从大量数据中筛选出满足特定条件的数据集。Pandas是一个强大的Python数据分…

LeetCode题练习与总结:单词搜索--79

一、题目描述 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水…

Airmail 5 for Mac:高效电子邮件管理软件

Airmail 5 for Mac作为一款功能强大的电子邮件客户端软件&#xff0c;为Mac用户带来了全新的邮件管理体验。其高效、直观的操作界面&#xff0c;使得用户可以轻松管理各类邮件&#xff0c;提升工作效率。 Airmail 5 for Mac v5.7.4中文激活版 首先&#xff0c;Airmail 5支持多个…

二叉搜索树(Binary_Search_Tree)

文章目录 二叉搜索树概念二叉搜索树的操作查找插入删除 二叉搜索树的应用二叉搜索树的实现K模型KV模型 二叉搜索树的性能分析 二叉搜索树概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树&#xff1a; 若它的左子树不为空&a…

计算机网络面试高频:输入域名会发生那些操作,开放性回答

更多大厂面试内容可见 -> http://11come.cn 计算机网络面试高频&#xff1a;输入域名会发生那些操作&#xff0c;开放性回答 输入域名之后&#xff0c;会发生哪些操作&#xff1f; 当在浏览器中输入www.baidu.com并按下回车键时&#xff0c;会触发一系列复杂的网络过程&am…

MMSeg搭建自己的网络

配置结构 首先&#xff0c;我们知道MMSeg矿机的配置文件很多&#xff0c;主要结构如下图所示。 在configs/_base_下是模型配置、数据集配置、以及一些其他的常规配置和运行配置&#xff0c;四类。 configs/all_config目录下存放&#xff0c;即是将四种配置聚合在一起的一个总…

互联网的下个风口可能是供应链和B2B行业的创新

6年前我写过一篇文章叫做《所有B2B从业者都会遇到的9个问题》&#xff0c;这篇文章也同步发布在了我的知乎以及CSDN博客上面。几个平台陆续有读者通过私信和留言向我咨询一些问题&#xff0c;刚好这2年我对B2B又有了一些新的思考&#xff0c;于是就针对前些年的那篇文章做一些补…

ubuntu22.04安装TensorRT(过程记录)

重要说明&#xff1a;此贴经过多次修改。第一次安装的的为trt8.6.1版本。第二次安装的10.0.0.6版本。有些地方可能没改过来&#xff0c;比如链接向导&#xff0c;我懒得改了&#xff0c;但是流程是对的。 cuda和cudnn版本对应关系 tensorRT历史发行版本 CUDA历史发行版本 cudn…

【Linux】make 和 makefile

进度条 #pragma once#include <stdio.h>#define NUM 102 #define BODY #define TOP 100 #define RIGHT >extern void processbar(int rate);#include "processBar.h" #include <string.h> #include <unistd.h>const char lable[] "|/-\…

【限时免费】Adobe全家桶免费领取 一键安装,永久使用 全家桶大礼包破解直装版 2020-2024 设计师御用超全软件 值得收藏

一次购买&#xff0c;终生使用&#xff01;正版永久激活&#xff0c;免费一键安装&#xff0c;赠送学习视频教程&#xff0c;支持远程安装&#xff0c;安装失败&#xff0c;立即退款。无需付费&#xff0c;直接免费送&#xff01; Adobe全家桶&#xff08;Adobe Creative Clou…

【Canvas与艺术】绘制美国星条旗

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>使用HTML5/Canvas绘制美国星条旗</title><style type"…

舌头分割YOLOV8-SEG

舌头分割&#xff0c;基于YOLOV8-SEG&#xff0c;训练得到PT模型&#xff0c;然后转换成ONNX&#xff0c;OPENCV的DNN调用&#xff0c;从而摆脱YOLO依赖&#xff0c;支持C,PYTHON,ANDROID开发 舌头分割YOLOV8-SEG

Gromacs——教程学习(1)

分子动力学模拟&#xff08;Molecular Dynamics&#xff09;全流程 所有的xvg格式文件&#xff0c;都可以使用大神编写的python DuIvyTools脚本可视化&#xff0c;很方便&#xff0c;只要你的电脑配置了python或者anaconda或者miniconda pip install DuIvyToolsdit xvg_show -…

Blender面操作

1.细分Subdivide -选择一个面 -右键&#xff0c;细分 -微调&#xff0c;设置切割次数 2.删除 -选择一个或多个面&#xff0c;按X键 -选择要删除的是面&#xff0c;线还是点 3.挤出面Extrude -选择一个面 -Extrude工具 -拖拽手柄&#xff0c;向外挤出 -微调&#xff…
最新文章