Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >bootstrap 导航栏 3

bootstrap 导航栏 3

用户5760343

发布于 2019-07-05 03:40:42

发布于 2019-07-05 03:40:42

2.4K0

举报

文章被收录于专栏：sktjsktj

image.png

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">个人设置</a></li> <li><a href="#">消息中心</a></li> </ul> </body> </html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.06.30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

bootstrap 导航栏

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <span class="sr-only">展开导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">网站标题</a> </div> <div class="collapse navbar-collapse" id="menu"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">导航标题1</a></li> <li><a href="#">导航标题2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">下拉菜单1</a></li> <li class="divider"></li> <li><a href="#">下拉菜单2</a></li> <li class="divider"></li> </ul> </li> </ul> </div> </nav> </body> </html>

用户5760343

2019/07/05

3.8K0

bootstrap tab 常用

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <ul id="myTab" class="nav nav-tabs"> <li class=""> <a href="#home" data-toggle="tab">用户背景</a> </li> <li class=""> <a href="#profile" data-toggle="tab">方案描述</a> </li> <li class=""> <a href="#messages" data-toggle="tab">方案优势</a> </li> <li class=""> <a href="#settings" data-toggle="tab">方案优势</a> </li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </body> </html>

用户5760343

2019/07/07

1.7K0

bootstrap 常用导航栏页脚常用**

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">管理后台</a> </div>

用户5760343

2019/07/05

9380

bootstrap 导航条 4

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <nav class="nav navbar-default navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand">我的nav</a> </div> <div class="navbar-collapse collapse" id="mynav"> <ul class="nav navbar-nav"> <li class="active"><a href="#">守望先锋</a></li> <li><a href="#">枪火游侠</a></li> <li><a href="#">虚幻争霸</a></li> <li><a href="#">风暴英雄</a></li> </ul> </div> </div> </nav> </body> </html>

用户5760343

2019/07/05

1.6K0

bootstrap 面包屑常用

html css jquery javascript

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active" aria-current="page">Home</li> </ol> </nav>

用户5760343

2019/07/05

7150

bootstrap tab 3.4 常用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <title>Title</title> </head> <body> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li> <li><a href="#tab2" data-toggle="tab">Tab2</a></li> <li><a href="#tab3" data-toggle="tab">Tab3</a></li> <li><a href="#tab4" data-toggle="tab">Tab4</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"><img src="images/1.png"></div> <div class="tab-pane" id="tab2"><img src="images/2.png"></div> <div class="tab-pane" id="tab3"><img src="images/3.png"></div> <div class="tab-pane" id="tab4"><img src="images/4.png"></div> </div> </div> <script type="text/javascript">

用户5760343

2019/07/07

5930

bootstrap 下拉菜单

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> 　<div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div> </body> </html>

用户5760343

2019/07/05

4.7K0

【Bootstrap】013-组件：导航、导航条、路径导航

navbar bootstrap class href meta

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式；

訾博ZiBo

2025/01/06

2550

【Bootstrap】013-组件：导航、导航条、路径导航

bootstrap 下拉菜单分割线

html css javascript

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li class="divider"></li> <li><a href="#">菜单项3</a></li> </ul> </div> </body> </html>

用户5760343

2019/07/05

1.3K0

bootstrap tooltip

html css javascript

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script> ('[data-toggle="tooltip"]').tooltip() }) </script> </head> <body> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button> </body> </html>

用户5760343

2019/07/07

1.4K0

bootstrap select 多选常用

bootstrap css html javascript

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-select.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-select.js"></script> </head> <body> <div class="container"> <div class="row"> <label class="col-sm-3 control-label" style="line-height: 34px;margin-bottom: 20px;">选择用户：</label> <div class="col-sm-6"> <select class="selectpicker" multiple> <option value="苹果">苹果</option> 　　<option value="菠萝">菠萝</option> 　　<option value="香蕉">香蕉</option> 　　<option value="火龙果">火龙果</option> 　　<option value="梨子">梨子</option> 　　<option value="草莓">草莓</option> 　　<option value="哈密瓜">哈密瓜</option> 　　<option value="椰子">椰子</option> 　　<option value="猕猴桃">猕猴桃</option> 　　<option value="桃子">桃子</option> </select> </div> </div> </div>

用户5760343

2019/07/07

1.6K0

bootstrap 警告框提示框带关闭常用

html css jquery javascript

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="alert alert-success"> <a class="close" href="#" data-dismiss="alert">×</a> <p>显示了警告框</p> </div> <div class="alert alert-danger"> <a class="close" href="#" data-dismiss="alert">×</a> <p>显示了警告框</p> </div> <div class="alert alert-info"> <a class="close" href="#" data-dismiss="alert">×</a> <p>显示了警告框</p> </div> </div>

用户5760343

2019/07/05

1.9K0

bootstrap select 多选，最多选择两项常用

image.png <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-

用户5760343

2019/07/08

3.6K0

bootstrap select 多选，最多选择两项常用

bootstrap select 带颜色

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-select.css" r

用户5760343

2019/07/08

1.6K0

bootstrap select 多选搜索框分组常用

image.png <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-

用户5760343

2019/07/08

2.1K0

bootstrap select 多选搜索框分组常用

bootstrap 图标按钮组常用

html css jquery javascript

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-download"></span></button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></button> </div>

用户5760343

2019/07/05

1K0

bootstrap 表单验证不为空验证

css html javascript

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrapValidator.min.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrapValidator.min.js"></script> </head> <body> 　<form role="form"> <div class="form-group"> <label>Username</label> <input type="text" class="form-control" name="username" /> </div> <div class="form-group"> <label>Email address</label> <input type="text" class="form-control" name="email" /> </div> <div class="form-group"> <button type="submit" name="submit" class="btn btn-primary">Submit</button> </div> </form> <script>

用户5760343

2019/07/07

8.9K0

bootstrap 搜索框常用

css bootstrap html go javascript

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-select.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-select.js"></script> </head> <body> <div class="container"> <div class="input-group"> <input type="text" class="form-control input-lg"> <span class="input-group-addon btn btn-primary">搜索</span> </div> <div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button"> Go! </button> </span> <input type="text" class="form-control"> </div> </div>

用户5760343

2019/07/07

2.3K0

bootstrap scollspy 滚动监听

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <style> body { position: relative; }

用户5760343

2019/07/07

7210

bootstrap bootstrap-modal.js 模态对话框并获得传值

html css jquery ui 网站

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="modal fade" id="qrcode" tabindex="-1" role="dialog" aria-labelledby="information"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title">请扫描二维码，完成支付</h4> </div> <div class="modal-body" style="text-align: center"> <p id="message"></p> <img src="" alt="QRCode" id="scan"> </div> </div> </div> </div> <button id="popup" class="btn btn-primary btn-lg btn-block">我弹</button> <script>

用户5760343

2019/07/07

6.6K0

相关推荐

bootstrap 导航栏

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

换一批

加入讨论

的问答专区 >

1KOL擅长5个领域

相关课程

一站式学习中心 >

腾讯云开发玩转小程序实战训练营

云开发 CloudBase