BootStrap

已于 2022-05-28 10:19:05 修改
阅读量112 收藏
点赞数
分类专栏： 前端 文章标签： python
于 2022-05-27 15:56:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20427967/article/details/124993381
版权

别人封装好的样式，引入使用

1 项目格式和引入方法

2 引入JS动态效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .c1 {
            width: 1400px;
            margin: 0 auto;
        }

        .c2 {
            position: fixed;
            right: 100px;
            bottom: 10px;
            padding-left: 20px;
        }

    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Saas后台</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">项目一 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">项目二</a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div><!-- /.container-fluid -->

</nav>
<!-- 新建按钮和表格 -->
<div class="c1">
    <div>
        <button type="button" class="btn btn-info">
            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
            新 建
        </button>
    </div>
    <div style="margin-top:20px ">
        <div class="bs-example" data-example-id="bordered-table">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>薅羊毛</th>
                    <th>机器一</th>
                    <th>机器二</th>
                    <th>机器三</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1日</th>
                    <td>10斤</td>
                    <td>20斤</td>
                    <td>10斤</td>
                </tr>
                <tr>
                    <th scope="row">2日</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3日</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- 分页 -->
<nav aria-label="Page navigation" class="c2">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">10</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
<!-- 引用js样式 -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

ModuleNotFoundError: No module named ‘pywin32_bootstrap‘解决方案
weixin_43178406的博客
08-13 17万+
本文主要介绍了ModuleNotFoundError: No module named 'pywin32_bootstrap’解决方案，希望能对使用Python的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案
Bootstrap使用
m0_57774967的博客
04-24 5378
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
Bootstrap5 阴影
听海边涛声
08-31 2104
Bootstrap5 阴影
Bootstrap简介
归兮的博客
08-18 9445
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap的安装
12-05 1972
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
bootstrap datetimepicker
lishuaigell的博客
05-17 6485
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
bootstrap网页作业
m0_62221227的博客
04-19 5291
bootstrap网页作业
Bootstrap
CJW的博客
07-28 8230
Bootstrap Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript，它简洁灵活，使得 Web 开发更加快捷。 基本结构 Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 行内包含列，每行最多12列。 Bootstrap 网格的基本结构： <div clas
Bootstrap educoder
qq_46675545的博客
06-12 4436
Bootstrap Bootstrap入门
Bootstrap基础知识
li_peng_yuan的博客
11-14 5395
1 、什么是 Bootstrap? Bootstrap 的作用是什么? ​ Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架. ​ 该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效) ​ 开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现. ​ 作用: Bootstrap 使得 Web 开发更加快捷、 高效. Bootstrap 支持响应式开发, 解决了移动
bootstrap旅游网站
02-09
Bootstrap是世界上最流行的前端开发框架之一，尤其在构建响应式、移动优先的网页设计时，它提供了丰富的组件和样式。"Bootstrap旅游网站"项目显然利用了Bootstrap的强大功能来创建一个专门针对旅游业的网站模板。...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
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文件，经过压缩...
bootstrap-3.4.1.zip
02-21
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，用于快速构建响应式、移动优先的网站。在本案例中，我们关注的是Bootstrap的3.4.1版本，这是该框架的一个稳定更新，提供了许多改进...
如何利用 Python 获取京东商品 SKU 信息接口详细说明
J15779585792的博客
05-17 1391
通过上述步骤和代码示例，你可以轻松地使用 Python 调用京东商品 SKU 信息接口，获取商品的详细信息。希望这个指南对你有所帮助！如果你对电商数据开发有更多兴趣，可以尝试探索更复杂的功能，如多线程爬取、数据可视化等。如遇任何疑问或有进一步的需求，请随时与我私信或者评论联系。
进阶知识：无参的函数装饰器之深入理解@wraps()
最新发布
Tom的专栏
05-20 836
@wraps(func)是functools模块中的装饰器工具，主要用于保留被装饰函数的元信息，如函数名称（__name__）和文档字符串（__doc__）。通过使用@wraps(func)，装饰器返回的新函数会继承原函数的属性，保持代码的透明性。对比不使用@wraps的情况，后者会导致函数元信息丢失，调试和文档生成时难以追踪原始函数。@wraps(func)在框架开发、单元测试、API文档生成和调试定位等场景中尤为重要，建议始终使用以确保装饰器的透明性和文档一致性。
《Python星球日记》 第95天：分布式训练与推理
Code_流苏：在代码中寻诗意，在实践中觅真知
05-19 1232
《Python星球日记》 第95天：分布式训练与推理，今天，我们将探索分布式训练与推理技术，这是解决大规模AI模型训练和部署挑战的关键方法
【python】返回所有匹配项的第一个元素、第二个元素。。。
突围
05-19 517
【python】返回所有匹配项的第一个元素、第二个元素。。
Bootstrap 3.5文件结构与API使用指南
Bootstrap是由Twitter开发的前端框架，它用于快速开发响应式布局、移动设备优先的web项目。Bootstrap简化了HTML、CSS和JavaScript的工作量，通过预制的组件和工具类来实现界面的快速搭建和设计。Bootstrap 3.5是该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秦朝胖子得加钱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值