python之路_前端基础之Bootstrap 组件

文档内容参考地址:http://v3.bootcss.com/components/

一、图标

  如下例,Star文本前有一个空格:

<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

二、下拉菜单

  将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。实例介绍如下:

<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu " aria-labelledby="dropdownMenu1"><li class="disabled"><a href="#">Action</a></li>            //禁用项:为下拉菜单中的 <li> 元素添加 .disabled 类,从而禁用相应的菜单项。<li><a href="#">Another action</a></li><li class="dropdown-header">Dropdown header</li>            //标题:在任何下拉菜单中均可通过添加标题来标明一组动作。<li><a href="#">Something else here</a></li><li role="separator" class="divider"></li>                  //分割线:为下拉菜单添加一条分割线,用于将多个链接分组。<li><a href="#">Separated link</a></li></ul>
</div>

三、按钮组

1、基本应用

2、按钮工具栏

  把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

3、按钮与下拉菜单嵌套

  想要把下拉菜单混合到一系列按钮中,只须把 .btn-group 放入另一个 .btn-group 中。

四、导航

 

转载于:https://www.cnblogs.com/seven-007/p/7879944.html

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java核心技术 卷1 多线程----线程安全的集合(4)

如果多线程要并发的修改一个数据结构&#xff0c;例如散列表&#xff0c;那么很容易会破坏这个数据结构。一个线程可能要开始向表中插入一个新元素。假定在调整散列表各个桶之间的链接关系的过程中&#xff0c;被剥夺了控制权。如果另一个线程也开始遍历同一个链表&#xff0c;…

如何快速实现 Wordpress 博客域名更换?

如题&#xff0c;如何快速更换使用 Wordpress 搭建的网站、博客的域名&#xff0c;除了在域名服务商那更换域名的解析和 web服务器端的配置外&#xff0c;还应该从数据库端做些什么&#xff1f;熟悉 Wordpress 的用户都知道在 Wordpress 后台&#xff0c;设置 --> 常规 里有…

浮动—春联(文字竖直排列)

<div id"main"><div class"top">李白</div><div class"left">明月几时有</div><div class"right">把酒问青天</div> </div> 1 #main{2 height: 540px;3 …

了解下广告计费模式CPC、CPA和CPM

目前各大广告平台最常见的广告计费模式分别有CPC、CPA、CPM。例如知乎、头条、百度、腾讯等各类平台投放广告&#xff0c;基本都离不开这几种广告计费方式。由于博客流量日渐见好&#xff0c;最近也申请了谷歌的广告的流量主&#xff0c;所以有必要了解下这几种广告模式&#x…

JUnit 5 –设置

2015年11月&#xff0c; JUnit Lambda团队展示了他们的原型 。 此后&#xff0c;该项目更名为JUnit 5&#xff0c;并于2016年2月发布了Alpha版本。我们将在一系列简短文章中对其进行探讨&#xff1a; 设定 基本 建筑 条件 注射 … 本章讨论JUnit 5的设置&#xff0c;以便…

如何在 VS Code 中创建自己的代码片段

在项目开发中&#xff0c;我们经常需要新建文件&#xff0c;而这些初始化这些文件又需要敲出很多相同的代码&#xff0c;比如我们新建一个 .vue 的文件&#xff0c;需要我们在写正式的功能代码之前&#xff0c;完成以下初始化代码&#xff1a; <script setup langts> &l…

如何使用 Apifox 来管理测试你的接口

日常开发&#xff0c;你是使用 Postman 来测试接口&#xff0c;还是用接口文档生成工具 Swagger&#xff0c;最近发现了一个很好用的工具 Apifox&#xff0c;集API 文档、API 调试、API Mock、API 自动化测试功能为一体&#xff0c;兼客户端和 Web 端的强大的功能。 主要界面如…

完善系统的最后一公里,增加系统日志功能

当我们在开发一个系统的时候&#xff0c;随着规划的功能越来越多&#xff0c;按照复杂度和稳定性相反的原则&#xff0c;为了保证系统能够按照我们设想的目标运行&#xff0c;我们需要对系统的运行状况进行监控。 那么什么时候介入监控比较好&#xff1f;在系统功能开发的前期…

java泛型面试_Java泛型面试问题

java泛型面试Java面试中的通用面试问题在相当长的时间内在Java 5周围越来越普遍&#xff0c;许多应用程序都转移到Java 5上&#xff0c;并且几乎所有新的Java开发都发生在Tiger&#xff08;Java 5的代号&#xff09;上。 泛型和Java 5功能&#xff08;例如Enum&#xff09;的重…

Vue3 实现网页背景水印功能

经常有一些公司和组织出于系统文件或信息安全保密的需要&#xff0c;需要在系统网页上增加带有个人标识&#xff08;系统账号或个人信息&#xff09;的水印&#xff0c;可以简单防止截图外传首先我们来看这样一个水印功能的实现思路&#xff0c;通常是在我们原有的网页上附上一…

部署微服务– Spring Boot fatjar到Amazon Elastic Beanstalk

最近&#xff0c;我正在研究概念验证的Web应用程序&#xff0c;我想将其部署到公共云以进行快速演示。 我决定使用Amazon&#xff0c;因为我已经有过使用它的经验。 亚马逊提供了几种不同的方式来部署Java Web应用程序。 EC2使我们可以灵活地在机箱上安装和配置任何我们想要的…

在线答卷系统的前端设计与数据库系统的设计与实现

如果要你实现一个在线的答题系统&#xff0c;你能想到它该具有哪些功能&#xff1f;当我接到这样一个需求的时候&#xff0c;脑海中立马能想到的就是它有录入题库的功能&#xff0c;创建试卷后可以从题库选择试题&#xff0c;并且可以针对试题进行分数的设置和排序。试卷发布后…

jgroups传输消息_使用JGroups进行ElasticMQ消息复制

jgroups传输消息ElasticMQ是一个消息服务器&#xff0c;具有Scala&#xff0c;Java和与Amazon SQS兼容的接口。 它通过跨服务器群集复制消息来支持有保证的消息传递&#xff0c;并通过日志记录实现消息持久性。 消息复制是ElasticMQ的核心功能之一。 但是&#xff0c;如果您看一…

使用 Element 组件搭建在线学习的课程卡片设计

假如我们要做一个在线课程学习的系统&#xff0c;其中我们需要做的一个功能就是课程信息流的一个展示&#xff0c;以等高卡片列表或者瀑布流的方式呈现。首先我们来罗列下这个卡片内应该包括哪些信息点&#xff1a;课程名称课程简介分类信息课程评分等级课程文件课时观看学习人…

12个很棒的Spring数据教程来启动您的数据项目

Spring Data的任务是为数据访问提供一个熟悉且一致的&#xff0c;基于Spring的编程模型&#xff0c;同时仍保留基础数据存储的特​​殊特征。 它使使用数据访问技术&#xff0c;关系和非关系数据库&#xff0c;map-reduce框架以及基于云的数据服务变得容易。 这是一个总括项目…

python多线程编程(3): 使用互斥锁同步线程

问题的提出 上一节的例子中&#xff0c;每个线程互相独立&#xff0c;相互之间没有任何关系。现在假设这样一个例子&#xff1a;有一个全局的计数num&#xff0c;每个线程获取这个全局的计数&#xff0c;根据num进行一些处理&#xff0c;然后将num加1。很容易写出这样的代码&am…

如何防止水印被恶意删除或者隐藏?

继上篇 Vue3 实现网页背景水印功能 我们了解了常见的网页水印功能是如何实现的&#xff0c;懂原理的都知道水印是通过在网页中添加代码绘制 DOM 元素覆盖在原有的网页上而来的&#xff0c;一旦你打开浏览器中的元素审查&#xff0c;可以通过删除元素或者在元素的样式上操作属性…

jmc线程转储_如何分析线程转储– IBM VM

jmc线程转储本文是我们的线程转储分析系列的第4部分&#xff0c;它将为您提供什么是IBM VM的JVM线程转储以及您将找到的不同线程和数据点的概述。 您将看到和学习​​到&#xff0c;IBM VM Thread Dump格式是不同的&#xff0c;但是提供了更多现成的故障排除数据。 在这一点上&…

Java 8:使用交替接口公开的类型安全地图生成器

动态展示您的课程 当我是Java新手时&#xff0c;我记得当时想过应该有一种方法可以删除或隐藏我不想公开的类中的方法。 就像用private方法或类似方法覆盖public方法一样&#xff08;哪种情况是不可能的&#xff0c;也不应该是不可能的&#xff09;。 显然&#xff0c;今天&…

nodejs面试题

1、为什么用Nodejs,它有哪些缺点&#xff1f; 事件驱动&#xff0c;通过闭包很容易实现客户端的生命活期。不用担心多线程&#xff0c;锁&#xff0c;并行计算的问题V8引擎速度非常快对于游戏来说&#xff0c;写一遍游戏逻辑代码&#xff0c;前端后端通用当然Nodejs也有一些缺点…