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,一经查实,立即删除!

相关文章

内卷之下,前端工程师如何自救

近两年的职场内卷现象越来越严重&#xff0c;996 工作制在各大公司已经很常见&#xff0c;甚至有更甚者&#xff0c;告诉你我们公司的前端是如何内卷的&#xff1f;为了数字化转型&#xff0c;公司要为产品平台化打造一个办公协同的在线管理系统&#xff0c;来规范化项目流程管…

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

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

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

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

java jigsaw_是从Java 8启动的Project Jigsaw吗?

java jigsaw在马克雷因霍尔德 &#xff08; Mark Reinhold &#xff09;在他的《 项目拼图&#xff1a;火车晚点 》一文中提出“将项目拼图推迟到Java 9的下一个发行版中”。 他解释了这样做的原因&#xff1a;“仍然存在一些重大的技术挑战”&#xff0c;并且“没有足够的时间…

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

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

UE 动画系统框架介绍及使用

UE 动画系统介绍 UE 动画系统介绍 UE 动画系统介绍一 动画基础介绍1.1 骨架1.2 骨架网格体1.3 动画序列1.4 动画蓝图二 状态机三 动画混合Blend3.1 动画混合3.2 混合空间BlendSpace3.3 惯性混合四 瞄准偏移AimOffset五 叠加动画Additive Animation六 动画蒙太奇 Animation Mont…

了解下广告计费模式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;以便…

Python非递归实现二叉树的后续遍历

leetcode 145. Binary Tree Postorder Traversal 思路一&#xff1a; 使用一个栈stack保存经过的根结点&#xff0c;另一个栈flag保存每个结点的右子树是否遍历&#xff1b;如果根结点存在&#xff0c;结点入栈&#xff0c;并把结点的右子树遍历结果置为0&#xff0c;代表没遍历…

删除对象中值为 null 或者 undefined 的属性

针对对象属性的操作&#xff0c;往往用到遍历。如何遍历对象的所有属性&#xff0c;有一种方法是 Object.entries(obj) 将属性名添加到一个数组中&#xff0c;然后来操作数组。 第一种方法 const removeNullUndefined (obj) > Object.entries(obj).reduce((a, [k, v]) &g…

《Linux命令行与shell脚本编程大全 第3版》Linux命令行---55

以下为阅读《Linux命令行与shell脚本编程大全 第3版》的读书笔记&#xff0c;为了方便记录&#xff0c;特地与书的内容保持同步&#xff0c;特意做成一节一次随笔&#xff0c;特记录如下&#xff1a;转载于:https://www.cnblogs.com/guochaoxxl/p/7888785.html

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

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

java基础(第七章课后作业)03

1 package shuzu;2 3 import java.util.Scanner;4 5 public class ZuoYe03 {6 7 public static void main(String[] args) {8 Scanner meng00new Scanner(System.in);9 int []numsnew int[10];//定义一个输入10个整数的数组 10 int []countnew int…

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

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

登录之后更新导航

用上下文处理器app_context_processor定义函数获取session中保存的值返回字典 app.context_processor def mycontext():username session.get(user)if username:return {username:username}else:return {} 在父模板中更新导航&#xff0c;插入登录状态判断代码。注意用{% ... …

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

当我们在开发一个系统的时候&#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;的重…

Python 连接MongoDB并比较两个字符串相似度的简单示例

本文介绍一个示例&#xff1a;使用 pymongo 连接 MongoDB&#xff0c;查询MongoDB中的 字符串 记录&#xff0c;并比较字符串之间的相似度。 一&#xff0c;Python连接MongoDB 大致步骤&#xff1a;创建MongoClient---> 获取 DataBase --->获取Collection&#xff0c;代码…

Vue3 实现网页背景水印功能

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

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

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