<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>输入框和导航组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 100px;"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> </div> <br> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">@163.com</span> </div> <br> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <br> <div class="input-group"> <span class="input-group-addon"><input type="checkbox"></span> <input type="text" class="form-control"> </div> <br> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button class="btn btn-default">提交</button> </div> </div> <br> <div class="input-group"> <span class="input-group-addon"><input type="checkbox"></span> <input type="text" class="form-control"> </div> <br> <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"> <li class="dropdown-header">网站导航</li> <li><a href="###">首页</a></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> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>输入框和导航组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 200px;"> <ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> <br> <ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> <br> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> <br> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> <br> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li class="dropdown"> <a href="###" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> </ul> </li> <li><a href="#">关于</a></li> </ul> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>输入框和导航组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- <nav class="navbar navbar-default"> 导航 </nav> <nav class="navbar navbar-inverse"> 导航 </nav> --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="##" class="navbar-brand">标题</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li class="disabled"><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> <form action="###" class="navbar-form navbar-right"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button class="btn btn-default">提交</button> </div> </div> </form> <button class="btn btn-default navbar-btn navbar-left">按钮</button> <p class="navbar-text">我是一段文本<a href="##" class="navbar-link">链接</a></p> </div> </nav> <div style="height: 10000px;"></div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图:
相关推荐
BsMultiSelect.js是一款Bootstrap4带多选功能输入框组件。BsMultiSelect.js扩展了原生bootstrap4 input输入框,可在输入框中通过下拉框来选择多个输入内容。
这是一款基于Bootstrap4的标签输入框插件。该插件使用Bootstrap 4 badge组件来制作标签输入和移除的效果。
输入框组默认是div.input-group。接下来通过本文给大家介绍bootstrap下拉列表与输入框组结合的样式调整,感兴趣的朋友一起看看吧
主要为大家详细介绍了Bootstrap CSS组件之输入框组(input-group),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
第一章 bootstrap介绍 第二章 排版样式 第三章 表格和按钮 第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮...第八章 输入框和导航组件 .............共二十章,后面带开发实例!
主要为大家详细介绍了bootstrap布局中input输入框右侧图标点击功能实现的相关代码,感兴趣的小伙伴们可以参考一下
这是一款Bootstrap4数值输入插件。通过该插件可以非常轻松的将input元素转换为数值输入spinner。
Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航
JQ JS javascript bootstrap 带搜索 下拉框 select
使用datalist、bootstrap和jQuery制作下拉输入框,支持模糊查询,html & javascript & css
主要教大家学习使用Bootstrap输入框、导航、分页等常用组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享使用jQuery实现输入框组...注意这里要求使用到Bootstrap框架的输入框组,如: <input type=checkbox aria-label=...> <input type=text class=form-control aria-label=..
NULL 博文链接:https://onestopweb.iteye.com/blog/2268919
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
bootstrap样式控制的datetimepicker时间组件,分为bootstrap v2、bootstrap v3、bootstrap v4三个版本