Bootstrap

最新推荐文章于 2021-11-02 09:17:05 发布
最新推荐文章于 2021-11-02 09:17:05 发布
阅读量120 收藏
点赞数
分类专栏： HTML 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fwercweg/article/details/107820302
版权

Bootstrap

BootStrap：前端开发框架
在框架基础上开发，减少代码量，编码
定义了CSS样式和JS插件
响应式布局

<!doctype html>
<html lang="ch">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

响应式布局

同一套页面可以兼容不同分辨率的设备
实现：依赖于栅格系统，将一行平均分成12格子，指定元素占几个格子

  • 步骤
    1. 定义容器
      • container -> 固定宽度
      • container-fluid -> 100%宽度
    2. 定义行 -> 样式：row
    3. 定义元素 -> 样式：col-设备代号-格子数目
      • 设备代号：xs(<768px) / sm(>=768px) / md(>=992px) / lg(>=1200px)
    • 注意：
      1. 如果一行格子数目超出12，则自动换行
      2. 栅格类属性可以向上兼容
      3. 真实设备小于最小值，一个元素沾满一行

CSS样式和JS插件

全局CSS样式

  • 按钮：class="btn btn-default"
  • 图片:class="img-responsive"：图片任意尺寸100%
  • 表格
  • 表单

组件

  • 导航条
  • 分页条

插件

  • 轮播图
代码是Code
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript中integrity属性安全验证
小小笨南瓜
10-22 1170
Javascript中integrity属性安全验证
The resource has been blocked.
xif3681的博客
08-07 7555
问题： Failed to find a valid digest in the 'integrity' attribute for resource 'http://localhost:4200/assets/css/bootstrap.min.css' with computed SHA-256 integrity 'nvT75FkXevX06WR8vlhFFP02xzhq9qFxLQOuS...
script使用integrity属性进行安全验证
晴空闲云
11-02 6000
script标签引入文件 在html中，script标签可以通过src属性引入一个js文件，引入的js文件可以是本地的，也可以是远程的。 1. 引入本地文件 开发环境一般多引入本地js文件。 <script src="./js/index.js"></script> 2. 引入远程文件 部署到线上后，一般会分发到cdn，需要引入远程文件，形如： <script src="https://cdn.xxx.xx/js/index.js"></script> 只
学习Bootstrap时碰到错误Failed to find a valid digest in the ‘integrity‘ attribute for resource
qq_26939835的博客
10-03 9655
问题： 小白刚学html和css，在使用bootstrap过程中发现无法使用下拉导航栏，或者是显示不出效果。 Failed to find a valid digest in the 'integrity' attribute for resource 'XXXXX/css/bootstrap.min.css' with computed SHA-256 integrity 'sAcc18zvMnaJZrNT4v8J0T4HqzEUiUTlVFgDIywjQek='. The resource...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
bootstrap旅游网站
02-09
Bootstrap是世界上最流行的前端开发框架之一，尤其在构建响应式、移动优先的网页设计时，它提供了丰富的组件和样式。"Bootstrap旅游网站"项目显然利用了Bootstrap的强大功能来创建一个专门针对旅游业的网站模板。...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
移动web开发之bootstrap
shirlyran的博客
07-15 193
1.响应式开发 1.1 响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下，看到不同的页面布局和样式变化 平时我们的响应式尺寸划分 也可根据实际情况划分尺寸 2.bootstrap前端开发框架 bootstrap是基于htm...
js 的数据验证和插件
小叶曲
07-09 252
表单校验 使用 jquery.validate.js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单校验</title> <!-- CSS only --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/c.
kechengsheji2021.zip
07-30
kechengsheji2021.zip
1cfa8b474c28bb76433ab12fc99ee5ad.jpeg
最新发布
07-30
1cfa8b474c28bb76433ab12fc99ee5ad.jpeg
TwineCompile571GetItSetup.7z
07-30
JomiTech TwineCompile 是一款集成在 C++Builder IDE 中的插件，旨在通过多种技术显著减少 C++ 编译、构建和生成的时间。以下是 TwineCompile 的一些关键能力和特点： 集成编译优化：TwineCompile 通过多线程、文件缓存和自动后台编译等技术，直接集成到 C++Builder IDE 中，优化编译过程。 编译器封装：它不是 C++ 编译器，而是将 Embarcadero 经典和 CLANG 编译器封装在一个构建系统中，优化文件和项目的构建方式。 IDE 支持：TwineCompile 通过 GetIt 包管理器提供，支持安装它的 IDE。对于旧版 IDE 或没有活跃更新订阅的 IDE，可以购买许可证以获得支持。 版本兼容性：TwineCompile 5.x 支持 C++Builder 10.2 至 C++Builder 12.0，而 TwineCompile 4.x 支持 C++Builder 5 至 C++Builder 10.1。
SCI一区】淘金算法GRO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5642.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
植物大战僵尸纯js版本
07-30
用本地资源编写的css+js+html纯手撸版植物大战僵尸,使用vs code即可运行,不需要其他插件,快来下载试试吧(支持自定义阳光,僵尸刷新出现时间),支持自定义全部,有其他想法欢迎来私信共同探讨
bootstrap
06-01
, int size) { this.name = name; this.color = color; this.size = size; } public String getName() { return name; } public void setName(String name) { this.name = name; } public StringBootstrap是一个开源的前端框架，它基于HTML、CSS、JavaScript开发，旨在帮助开发者快速构建现代化的响应式网站和Web应用程序。Bootstrap提供了一系列的CSS样 getColor() { return color; } public void setColor(String color) { this.color = color; } public int式和JavaScript插件，可以用于常见的UI组件、布局和交互效果，从而简化开 getSize() { return size; } public void setSize(int size) { this.size = size; } } ``` 发过程，提高开发效率。Bootstrap最初由Twitter的前端工程师开发，现已成为最流行的前端框架之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值