输入行和导航组件

最新推荐文章于 2022-11-16 20:40:33 发布
最新推荐文章于 2022-11-16 20:40:33 发布
阅读量121 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27626645/article/details/78808470
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin: 100px">
<!--输入框组件-->
<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control"/>
</div>
    <!--在右侧添加文字-->
    <div class="input-group">
        <input type="text" class="form-control"/>
        <span class="input-group-addon">@</span>
    </div>
    <!--在两侧添加文字-->
    <div class="input-group input-group-lg">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control"/>
        <span class="input-group-addon">@</span>
    </div>
<!---->
<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-btn">
        <button class="btn btn-default">按钮</button>
    </span>
</div>
<!--下拉菜单-->
<div class="input-group">
    <input type="text" class="form-control"/>
    <div class="input-group-btn">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><!---->
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu"><!--关联起来--><!--菜单项居右对齐：dropdown-menu-right-->
            <li class="dropdown-header">网站导航</li><!--设置菜单标题-->
            <li><a href="#">首页</a></li>
            <li><a href="#">首页</a></li>
            <li class="divider"><a href="#">首页</a></li><!--分割线-->
            <li class="disabled"><a href="#">首页</a></li><!--不可点-->
        </ul>
    </div>
</div>

<!--导航栏-->
<ul class="nav nav-tabs"><!--nav-tabs实现标签导航-->
    <li class="active"><a href="#">111</a></li><!--首选状态-->
    <li><a href="#">112</a></li>
    <li><a href="#">113</a></li>
    <li><a href="#">114</a></li>
</ul>
    <!--胶囊式-->
<ul class="nav nav-pills ">
    <li class="active"><a href="#">111</a></li><!--首选状态 有nav-pills类才能正确显示-->
    <li><a href="#">112</a></li>
    <li><a href="#">113</a></li>
    <li><a href="#">114</a></li>
</ul>

    <!--垂直式-->
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">111</a></li><!--首选状态 有nav-pills类才能正确显示-->
    <li><a href="#">112</a></li>
    <li><a href="#">113</a></li>
    <li><a href="#">114</a></li>
</ul>
    <!--导航两端对齐-->
<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">111</a></li><!--首选状态 有nav-pills类才能正确显示-->
    <li><a href="#">112</a></li>
    <li><a href="#">113</a></li>
    <li class="disabled"><a href="#">114</a></li> <!--禁用导航中的项目-->
</ul>

<!--带下拉菜单的导航-->
<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">111</a></li><!--首选状态 有nav-pills类才能正确显示-->
    <li><a href="#">112</a></li>
    <li class="dropdown">

        <a href="#"  data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">99</a></li>
            <li><a href="#">66</a></li>
        </ul>
    </li>
    <li ><a href="#">114</a></li> <!--禁用导航中的项目-->
</ul>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
幸运的菇凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
导航组件—Android应用中使用导航图
weixin_44193930的博客
12-30 1700
文章目录一、 概述1.1 导航的概念1.2 导航的组成1.3 导航的优势二、 使用步骤2.1 步骤一：在应用级 build.gradle （非项目级build.gradle）文件中添加依赖2.2 步骤二：在项目级 build.gradle （非应用级build.gradle）文件中添加依赖2.3 步骤三：创建导航所涉及的Activity或Fragment2.4 步骤四：创建导航图（src/main/res/navigation/nav_login.xml）2.5 步骤五：设置导航图（src/main/res
前端组件化开发实践总结
张旭乾 - 全栈工程师/海归
10-13 7115
自从 2010 年第一份工作接触了前后端半分离的开发方式之后，在后面的这些年里，对前端的组件化开发有了更全面一点的认识，组件化在我们的前端开发中，对提高开发效率、代码的可维护性和可复用性有很大帮助，甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码，你可以按照实际情况应用到 React 或 Vue 的项目中。 前端组件化发展历史 在讨论组件化开发之前，我们先看看前端组件化开发的发展历史。网页开发刚起步时，并没有『前端』
Android导航组件Navigation从入门到精通
热门推荐
yingaizhu的博客
05-14 1万+
一、前言     传统的应用开发，一般都是采用一个界面一个 Activity 的形式，但是大家都知道， Activity 在 Android 中是属于重量级的组件，从而导致程序资源消耗大，用户体验不佳。而导航组件 Navigation 采用的是 Fragment 轻量级的组件实现的，可以节省资源，提高用户体验。 二、导航简介   &nbs...
vue封装导航栏组件
Sobered的博客
07-05 2849
    在项目中，经常需要我们自己封装组件，需要对组件进行抽取至封装度最高。这样一来，使这个组件复用性变得非常高，往往可以直接把封装好的组件文件一拖拽到另外的项目就可以直接使用。现在来封装一个底部导航栏组件。 首先先来看封装好的组件的效果图,文末尾附项目下载地址，可以直接拖过去使用： 首先，我们需要思考，如何才能写出这一个组件以及如何对他进行不断抽取的思想。我们想要封装好一个组件，都是从静态到动态行为开始的，就是说，一开始，先最简单的做出来，然后一层一层把它抽取，不
使用 Vue3 实现锚点组件
Lyrelion的博客
11-16 5074
使用 Vue3 实现锚点组件
一个angular的标签输入组件
08-10
在实际开发中，利用这样的标签输入组件可以极大地提升表单输入的便捷性和用户友好性，同时也减少了开发者自己实现此类功能的工作量。通过合理的配置和自定义，ngx-chips可以帮助构建出高效、直观且美观的标签输入...
Bootstrap 第8章 输入框和导航组件
08-12
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，使得构建响应式、移动设备优先的网站变得简单高效。在第8章“输入框和导航组件”中，我们将深入探讨Bootstrap如何处理表单元素和...
无限级树形结构组件，支持单选和多选组件，支持搜索，面包屑类型导航
10-18
通过这些组件和配置，开发者可以构建出具备无限级树形结构、单选/多选、搜索和面包屑导航功能的应用，满足不同平台的需求。在实际开发中，还需要考虑性能优化、用户体验设计以及与其他系统接口的集成等方面，以创建...
Bootstrap编写导航栏和登陆框
09-02
在本文中，我们将深入探讨如何使用Bootstrap框架来创建一...同时，理解并掌握Bootstrap的基本组件和类对于提升网页开发效率和质量大有裨益。不断学习和实践Bootstrap，将使你能够更有效地构建出美观且用户友好的界面。
Material的组件和示例超完整.rar
07-30
"Material的组件和示例超完整.rar"这个压缩包很可能包含了Material Design的各种组件和示例代码，供开发者参考和学习。 在Material Design中，主要的组件可以分为以下几个类别： 1. **按钮**：包括浮动操作按钮...
全国计算机三级（网络技术）做题技巧
07-22
全国计算机三级（网络技术）做题技巧
记录 cocos 开发问题 ，微信 wx.xxx函数 报找不到名称“wx”
07-22
wx api 文件
20231108-173536 时间箭贴板
07-22
时间粘贴小工具 启动后点击回车 可以得到时间字符串 直接粘贴可用
毕业设计javajsp西饼点心店收费系统(ssh)-qrp源码含文档工具包
07-22
毕业设计javajsp西饼点心店收费系统(ssh)-qrp源码含文档工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 点心店管理系统是针对点心店内部而设计的，应用于点心店的局域网，这样可以使得点心店内部管理更有效的联系起来。系统的主要功能包括：供货商信息管理、点心信息管理、采购申请管理与物品采购管理。 包含：源码、数据库脚本、论文、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
275、基于stm32的电压可调、电流智能检测系统设计（原理图、PCB图、源代码）
最新发布
07-22
275、基于stm32的电压可调、电流智能检测系统设计（原理图、PCB图、源代码） 功能：系统使用stm32单片机设计，USB 5V供电，实现3.3V——12V可调输出，电流测量范围1uA——500mA，液晶LCD12864显示，通过串口上传信息和串口修改输出电压；各功能如下： 1、使用stm32为核心，keil编程； 2、输出3.3V-12V可调电压； 3、输出电流显示在LCD12864上，输出电流检测范围是1uA——500mA； 4、串口同步上传电压和电流信息； 5、支持串口指令修改输出电压值；
C++《使用NeuroSky和摄像头实现的简易脑波控制的图片拍摄并且识别单词或图片中的植物》+源代码+文档说明
07-22
<项目介绍> - 使用NeuroSky和摄像头实现的简易脑波控制的图片拍摄并且识别单词或图片中的植物 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
ABB字迹书写技术文档
07-22
内容概要：包含指导使用ABB机器人完成“毅”字在写字板上书写的技术文档。在执行过程中将提供更多可能错误、其他路径，并引导读者在此基础上完成微量调整。会介绍部分原理，使读者在学习后增进对ABB仿真功能的了解，例如：RAPID的使用、仿真中碰撞监控的设置等 适合人群：适合ABB RobotStudio6.18.01仿真软件初学者 应用场景：应用于汇博机器人教学工作台，可以引导未接触过相关领域的人群实现仿真软件的编写直至最终烧录 能学到什么：①ABB RobotStudio6.18.01使用技巧；②ABB机器人运行过程；3、烧录方法；4、ABB机器人运行的弊端 阅读建议：此资源以开发ABB RobotStudio6.18.01RAPID程序学习其原理和内核，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
英语四六级四大题型分类总结资料/笔记（2）：听力
07-22
资料包含：掌握预读技巧，听力需注意14类关键词，听力九大技巧，听力长对话6大边听边记技能，听力五大杀绝，常见场景词汇归纳高频词组，词汇精讲技巧，听力短对话、长对话考试技巧，听力讲义综合笔记（具体和复合，替换题，段子，人物关系，责备场景题，场景题，but题，等），听力技巧等等。
毕业设计javajsp宿舍管理系统ssh源码含文档工具包
07-22
毕业设计javajsp宿舍管理系统ssh源码含文档工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 宿舍信息系统应该便于院系的宿舍管理，提高工作效率。能有效地对数据进行更新查询，并能在一定程度上实现自动化。 1）本系统的主要功能：学生管理，宿舍公告信息管理，宿舍管理，来访者信息管理，卫生检查信息管理以及保修审批管理。 2）系统性能：应方便快捷地完成宿舍管理的各项工作，数据查询速度快，查询安全、准确，数据合法性检验度高。 3）系统输入：学生的各种信息，包括学号、班级等。 包含：源码、数据库脚本、论文、答辩ppt、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值