⑨bootstrap组件 按钮式下拉菜单 输入框 使用基础案例

最新推荐文章于 2024-09-11 17:09:49 发布
最新推荐文章于 2024-09-11 17:09:49 发布
阅读量127 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ttzzyy/p/7620162.html
版权
 
View Code 

<!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">
    <!--移动设备优先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
    </style>
</head>
<body>
<div class="container">
    <h1>基本用法</h1>

    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" />
        <span class="input-group-addon">.00</span>
    </div>

    <div class="input-group input-group-lg">
        <span class="input-group-addon glyphicon glyphicon-user"></span>
        <input type="text" class="form-control" />

    </div>
    <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-user"></span>
        <input type="text" class="form-control" />

    </div>
    <div class="input-group input-group-sm">
        <span class="input-group-addon glyphicon glyphicon-user"></span>
        <input type="text" class="form-control" />

    </div>
    <hr/>
    <div class="input-group">
                <span class="input-group-addon">
                    <input type="checkbox" />
                </span>
        <input type="text" class="form-control" />

    </div>
    <hr />
    <div class="input-group">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-danger">OK</button>
                    <button type="button" class="btn btn-danger">OK</button>
                    <button type="button" class="btn btn-danger">OK</button>
                </span>
        <input type="text" class="form-control" />
    </div>
    <hr/>
    <div class="input-group">
        <div class="input-group-btn">
            <button type="button"
                    class="btn btn-default dropdown-toggle"
                    data-toggle="dropdown">
                Action
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">项目</a></li>
                <li><a href="#">项目</a></li>
                <li><a href="#">项目</a></li>
            </ul>
        </div>
        <input type="text" class="form-control" />

    </div>
</div>
</body>
</html>
View Code

 

转载于:https://www.cnblogs.com/ttzzyy/p/7620162.html

weixin_34336526
关注
bootstrap入门【按钮式下拉菜单，输入框组】
章鱼小丸子
03-01 4028
按钮式下拉菜单没什么好说的，就是以前学过的东西做了一个嵌套而已。注意dropup即可实现上拉 输入框组分前面加《span》，后面加和两头加三种，还可以添加按钮，下拉菜单，单选复选框哦~ 按钮式下拉菜单 分列式下拉菜单
bootstrap——组件（三、按钮式下拉菜单）
zaichuanguanshui的专栏
01-19 894
1、单按钮下拉菜单基础的下拉菜单最外层是.dropdown的div 现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <s
Bootstrap学习笔记（七） 输入框组
可爱的我可爱的code
08-19 652
通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素 &lt;div class="input-group"&gt; &lt;span class="input-group-add...
字体图标,响应式图片,导航条
weixin_43167531的博客
01-14 385
字体图标 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;字体图标&lt;/title&gt; &lt;link rel="stylesheet" type="t
Bootstrap_文档_04_下拉菜单_按钮_输入框_导航
pre_eminent的JAVA学习园地
05-31 1417
组件无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。Glyphicons 字体图标所有可用的图标包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。如何使用出于性能的考虑，...
按钮（Button）组件的功能和用法
被遗忘的角落
03-17 5997
按钮的功能： 按钮的功能实际上是用于特定触发事件的发生。比如说，你需要输入一段数字，确定输入完成后才触发某一个事件，这时候就需要按钮了，因为系统无法自己确定用户什么时候完成输入，无法执行下一步，只有当用户点击了按钮，确定完成了输入，这时候才触发下一步事件。 按钮的用法： 按照惯例，先看一下代码： protected void onCreate(Bundle savedInstanc
基于bootstrap按钮式下拉菜单组件的搜索建议插件
08-31
总结来说，Bootstrap按钮式下拉菜单组件的搜索建议插件是通过整合Bootstrap UI组件和动态搜索建议功能，为用户提供友好、高效的搜索体验。通过理解和应用这样的插件，开发者可以创建更富交互性和用户体验的网页搜索...
bootstrap下拉列表与输入框组结合的样式调整
09-01
若要在输入框组中加入下拉列表，我们可以使用Bootstrap的下拉菜单组件。通常，下拉菜单是通过`<button>`元素触发的，内部包含一个`<div class="dropdown-menu">`，里面是`<li>`元素，每个`<li>`元素内有一个链接`<a>...
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
08-31
本实例主要关注Bootstrap中的导航栏、下拉菜单和表单的使用，这些都是构建现代网页界面的关键元素。 首先，我们来看Bootstrap导航栏（Navbar）。在HTML结构中，导航栏由`<nav>`元素与`navbar`类定义，如`...
bootstrap输入框组使用方法
08-31
此外，输入框组还可以包含按钮，这些按钮可以是操作按钮或者下拉菜单。例如，我们可以在输入框右侧添加一个搜索按钮： ```html 搜索 ``` 更复杂的情况下，可以将按钮替换为一个下拉菜单，用户可以从菜单...
Bootstrap输入框组件使用详解
08-30
4. 结合其他组件：Bootstrap的网格系统 `.col-md-*` 可以与输入框组件结合使用，以实现响应式布局。在例子中，输入框组被放在了三个不同宽度的列中，展示了如何根据屏幕尺寸自适应排列。 5. 下拉菜单：`.input-...
Bootstrap组件（小图标、下拉菜单、输入框、导航和导航条、媒体对象、列表组、分页导航、缩略图）
六月星海的博客
04-01 4775
1.小图标 1.1小图标的用法： &lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;； 所有的小图标都是以glyphicon-开头的。 1.2小图标使用的注意事项： 1）图标类不能和其他组件直接联合使用，它们不能在同一个元素上与其他类同时存在，应该创建一个嵌套的span元素，并将图标应用到这个span上。 2）...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2809
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 851
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 431
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 866
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1289
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 351
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
vue3中动态引入本地图片的两种方法
最新发布
haodanzj的博客
09-11 251
动态在本地引入图片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值