Bootstrap补充内容

最新推荐文章于 2024-07-21 12:12:15 发布
最新推荐文章于 2024-07-21 12:12:15 发布
阅读量358 收藏
点赞数 1
分类专栏： # 前端（旧） 文章标签： bootstrap html css
zbdx
本文链接：https://blog.csdn.net/qq_52077949/article/details/119962118
版权
  1. 掌握BootStrap手册用法，使用全局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>全局CSS样式-表格</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped table-bordered table-hover">
        <tr>
            <th>数字1</th>
            <th>数字2</th>
            <th>数字3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

    
</body>
</html>
  1. 使用BootStrap组件快速布局网页

直接复制过来食用就可以

<!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-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          下拉
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <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>
      </div>


      <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">用户中心</a></li>
        <li><a href="#">用户</a></li>
        <li class="active">数据</li>
      </ol>
</body>
</html>

字体图标

<!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-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <i class="glyphicon glyphicon-user"></i>
</body>
</html>
  1. 插件

因为使用了js，所以要多加两个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>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <!-- <div class="dropdown">
        <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown trigger
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dLabel">
          <li>111</li>
          <li>111</li>
          <li>111</li>
        </ul>
      </div> -->
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_1.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_2.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_3.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_4.jpg" alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

    <script src="./js/jquery.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
花花叔叔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Homework20171129_Bootstrap综合及HR补充1
08-08
在本项目" Homework20171129_Bootstrap综合及HR补充1"中，主要涉及了几个关键的IT知识点，包括前端开发技术、jQuery库的使用、论坛界面的实现以及AngularJS的潜在应用。以下是对这些知识点的详细解释： 1. **...
bootstrap插件
03-04
使用时，需要将这些文件链接到项目中，替换或补充Bootstrap默认的文件。这使得我们可以对导航栏进行更精细的定制，以满足特定的设计需求。 总结起来，Bootstrap插件极大地扩展了Bootstrap框架的功能，使得开发者...
Bootstrap补充
dichengpai8268的博客
10-18 274
一、一个小知识点 1、截取长屏的操作 2、设置默认格式 3、md，sm， xs 4、空格和没有空格的选择器 二、响应式介绍 - 响应式布局是什么？ 　　同一个网页在不同的终端上呈现不同的布局等 - 响应式怎么实现的？ 　　1. CSS3 media query 媒体查询 　　2. JS去控制网页的布局和样式等 　　　　- 缺点：工作量大，网页...
数据预处理：缺失值处理
memory_hahaha的博客
03-16 4731
简介常用的缺失值处理方法
bootstrap学习笔记2：配置sublime的bootstrap开发环境（代码提示）
壁立千仞无欲则刚的博客
05-11 2857
1、下载一个sublime，360软件管家都可以自动安装； 2、下载插件，地址：https://github.com/JasonMortonNZ/bs3-sublime-plugin 3、下载完解压复制到sublime的文件夹下面，文件夹的打开位置：点击sublime的preferences-browse packages-打开 然后把解压后的文件夹放进去就可以了。
bootstrap3-typeahead 文本自动补全填充
热门推荐
chen_lay的博客
02-06 1万+
由于项目需要，需要实现文本的自动填充功能，多方查资料总结如下： bootstrap-typeahead 在用户填写表单时，为用户提供提示或数据。 Bootstrap 允许您创建外观好看的 Typeahead，而且，它易于扩展，您可以不需要太大的改动就可以加强它的功能。 下面来介绍bootstrap3-typpeahead的使用： 1、必须引用两个 JavaScript
Bootstrap下自动补全的演示调整
斌仔的博客
08-23 4214
在bootstrap的对话框中，当其中的输入项使用了自动完成控件，则其中下拉框中的内容就会被bootstrap对话框的覆盖层遮盖。 为了能够使后面的自动完成的层显示出来，可以使用如下的样式定义： ul.ui-autocomplete{ z-index: 9999; }
Bootstrap3.0学习笔记之CSS相关补充
09-22
响应式工具是Bootstrap的一大亮点，通过使用如`.visible-*`和`.hidden-*`的class，开发者可以在不同屏幕尺寸下控制内容的显示与隐藏，从而实现跨设备的优化。这些工具仅适用于块级元素，不适用于行内元素和表格。 ...
bootstrap-table
10-13
Bootstrap Table是一种基于Bootstrap...总之，Bootstrap Table是Bootstrap框架的一个强大补充，尤其适用于需要展示大量结构化数据的场景。通过深入理解其源码和提供的功能，开发者可以构建出更加高效、易用的网页表格。
bootstrap-selectv1.12.4.zip
04-22
Bootstrap Select 是为了补充 Bootstrap 原生不支持的下拉菜单增强功能，确保整体设计风格的一致性。 至于压缩包子文件的文件名称列表 "bootstrap-selectv1.12.4"，通常这会包括如下文件： 1. `bootstrap-select....
使用bootstrap typeahead插件完成自动补全
pony1688的博客
06-25 621
项目中需要输入框自动补全,搜索测试没少走弯路,终于成功,记录下来,共同学习,希望大家少进坑. 1.依次引入jQuery、bootstrap、typeahead依赖包。 2.创建容器，指定要实现自动补全的位置 3.使用typeahead函数，给参数赋值typeaheadjar包的下载地址：https://github.com/bassjobsen/Bootstrap-3-Typeahead/(使用环境:Bootstrap v4.3.1,Jquery v3.5.1,typeahead v4.0.2,Net:6.
bootstrap3-typeahead 自动补全完美使用教程
phubing
04-12 7509
这篇文章记录了我在使用typeahead的一些问题，不是很全，但是基本够用。 Bootstrap提供typeahead组件来完成自动补全功能。 在做之前，我们先来看看它的选项 一、Source是个啥： 1、Array数组，当然，数组里面是简单的String或者JSOn都无所谓 2、还可以是个function（什么叫还可以是个function），这个source可以...
bootstrap自动补全插件
Pancras_gc
09-08 539
在输入框输入关键字,下方显示联想的数据 只需要关心后台传的是List $("#create-customerName").typeahead({ source: function (query, process) { $.get( "workbench/transaction/getCustomerName.do", { "name" : query }, function (data) { //alert(data); proce
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 888
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
[HTML]一文掌握
最新发布
CSDN20221005的博客
07-21 521
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
每日60秒新闻早报单页文字版HTML源码
2401_86030425的博客
07-17 281
每日60秒新闻早报单页文字版的，这个很早就有了，最近有用户问我这个怎么实现，其实很简单的只是一个单页而已，这个是PHP版的会将头部图片缓存到本地然后在展示可防止接口信息泄露。
动漫风格动漫404网站维护HTML源码
爱酷码的博客
07-21 456
动漫风格动漫404网站维护HTML源码，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面。
第一章、算法中的时间复杂度分析
Zjs15630471263的博客
07-20 687
想必打算学习算法的同学听说过这样一个概念：程序≈数据结构+算法。其中数据结构是实现程序的基本框架。而运用算法就是优化程序执行时间或空间上的必要措施。即寻找一个方法使程序的性能达到最优解。
bootstrap 书店销售管理系统
07-14
### 回答1： Bootstrap书店销售管理系统是一款用于管理书店销售流程的软件系统。该系统采用Bootstrap前端框架开发，拥有易用性和高度可定制的特点。 首先，该系统提供了一个友好的用户界面，用户可以通过图形化的操作界面轻松完成各项操作。无论是添加新图书、编辑图书信息还是查询销售记录，都只需要简单的操作即可完成。 其次，该系统具备强大的功能。用户可以在系统中添加图书的详细信息，包括书名、作者、出版社、价格等。系统还支持根据不同的分类、出版社、作者等进行图书的筛选和检索。此外，该系统还可以管理书店的库存，将进货、售出等记录自动同步至库存中，实时更新库存量，避免因为库存不足而造成的销售延误。 再者，该系统还可帮助书店管理销售业绩。用户可以通过系统生成各类销售报表，包括每日销售额、每月销售额、畅销书排行榜等。这些报表可以帮助书店了解销售情况，根据销售数据制定相应的销售策略，提高销售效率。 最后，该系统还具备良好的扩展性。系统可以根据书店的需求进行定制开发，添加更多的功能和模块，满足不同书店的特殊需求。同时，该系统还可以与其他软件系统进行无缝集成，如财务系统、会员管理系统等，实现信息的共享和互动。 综上所述，Bootstrap书店销售管理系统是一款功能强大、易用性高的软件系统，能够帮助书店管理销售流程、库存和销售业绩，并具备良好的扩展性和集成能力。 ### 回答2： Bootstrap书店销售管理系统是一种为书店提供综合销售管理解决方案的软件系统。该系统基于Bootstrap框架开发，具有响应式设计和良好的用户界面，可以适应不同大小的设备和屏幕。 该系统的主要功能包括库存管理、销售管理、订购和供应管理、报表生成等。首先，库存管理模块可以帮助书店管理书籍的进货、出库、库存盘点等工作，实时更新库存信息，并提供库存警报功能，提醒书店及时补充库存。 其次，销售管理模块可以帮助书店完成销售过程中的订单管理、收银、销售统计等任务。系统可以记录每个顾客的购买记录，并生成销售报表，帮助书店分析销售情况和趋势，作出适当的决策。 此外，订购和供应管理模块可以帮助书店与供应商进行订购和供应的管理。书店可以根据库存情况和销售数据，自动或手动生成订购单，并与供应商进行订单沟通和跟踪，确保及时补充库存，并与供应商建立良好的合作关系。 最后，该系统还具有报表生成功能，可以根据书店的销售数据和库存情况，生成各种类型的报表，包括销售报表、库存报表、订购报表等，帮助书店了解经营状况，制定更有效的销售和供应策略。 总之，Bootstrap书店销售管理系统是一款功能齐全、易于使用的软件，可以帮助书店实现高效的销售管理和库存控制，提高运营效率和利润。 ### 回答3： Bootstrap书店销售管理系统是一个基于网络的销售管理系统，专门设计用于帮助书店有效地管理销售活动。它包含了许多功能，可以大大提高书店的销售效率和业务管理水平。 首先，Bootstrap书店销售管理系统提供了一个直观和易于操作的界面，使用户能够方便地浏览和管理书店的所有销售信息。通过该系统，书店员工可以轻松管理、跟踪和记录书店的所有销售订单。系统的界面设计简洁美观，使员工能够快速学习和使用系统。 其次，Bootstrap书店销售管理系统具备强大的库存管理功能。系统可以自动跟踪书店的库存情况，提供即时库存信息，包括书籍的数量、价格和供应商等。当库存数量低于设定的阈值时，系统会自动发出提醒，以确保书店能够及时补充新的图书。 此外，该系统还提供了销售报表功能，用于分析书店的销售情况和趋势。通过对销售数据的统计和分析，书店管理者可以更好地了解哪些图书受欢迎，以及如何调整库存和销售策略。这有助于优化书店的运营和利润。 对于顾客来说，Bootstrap书店销售管理系统还提供了在线购物和支付功能。顾客可以通过系统浏览和下单，然后选择合适的支付方式完成支付。这使得购物更加便捷和高效，极大地提升了书店的销售能力和顾客满意度。 综上所述，Bootstrap书店销售管理系统是一款强大的销售管理工具，可以帮助书店提高销售效率和管理水平。它提供了直观易用的界面、库存管理、销售报表和在线购买等功能，为书店的运营和发展提供了有力的支持。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

花花叔叔

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

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

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

打赏作者

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

抵扣说明：

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

余额充值