学习使用Bootstrap输入框、导航、分页等常用组件
更新时间：2017年05月11日 09:21:46 作者：Cynthia_ying
这篇文章主要教大家学习使用Bootstrap输入框、导航、分页等常用组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap输入框和导航组件
一.下拉菜单
下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。
按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置datatoggle=”dropdown”才能有效。对于菜单部分，设置 class=”dropdown-menu”才能自动隐藏并添加固定样式。设置 class=”caret”表示箭头，可上可下。
示例效果:
代码：
<body>
<!-- 下拉菜单 -->
<div class="dropdown"> <!-- 加上open会默认显示下拉菜单选项的内容 -->
<!-- <div class="btn-group dropup"> 向上弹出式 -->
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单
<span class="caret"></span> <!-- 三角符号：当dropdown换成dropup时候，三角符号箭头会向上 -->
</button>
<ul class="dropdown-menu"> <!-- dropdown-menu-right 设置对齐方式：下拉菜单显示在右边，默认是左边 -->
<li> <a href="#">首页</a></li>
<li> <a href="#">咨讯</a></li>
<li> <a href="#">产品</a></li>
<li> <a href="#">关于</a></li>
</ul>
</div>
<br><!-- 导航其他选项使用 -->
<div class="dropdown">
<button class="btn btn-default" 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 class="divider"> <a href="#">产品</a></li><!-- 设置菜单分割线 -->
<li class="disabled"> <a href="#">关于</a></li> <!-- 设置菜单禁用项 -->
</ul>
</div>
</body>
二．输入框组件
文本输入框就是可以在<input>元素前后加上文字或按钮，可以实现对表单控件的扩展。
例如实现下列的效果：
代码示例：
<body>
<!-- 输入框组件 -->
<!-- 左侧添加文字 -->
<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">@</span>
</div>
<br><!-- 两侧添加文字,并设置为最大号的输入框 -->
<div class="input-group input-group-lg">
<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">
<span class="input-group-addon"><input type="radio"></span>
<input type="text" class="form-control">
</div>
<br><!-- 使用按钮 -->
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">提交</button>
</span>
</div>
<br><!-- 右侧使用下拉菜单或分页式 -->
<div class="input-group">
<input ttype="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> <a href="#">首页</a></li>
<li> <a href="#">咨讯</a></li>
<li> <a href="#">产品</a></li>
<li> <a href="#">关于</a></li>
</ul>
</div>
</input>
</div>
</body>
三. 导航条组件
导航组件，用于实现 Web 页面的栏目操作,导航条是网站中作为导航页头的响应式基础组件。
示例效果：
代码：
<body>
<!-- 导航条组件 -->
<!-- navbar-inverse 反转的样式（背景是黑色）-->
<!-- navbar-fixed-top导航条固定在顶部，拉动滚动条是始终早顶部显示导航条， navbar-fixed-bottom固定在底部 -->
<!-- navbar-static-top 静态导航，随着滚动条滚动，导航条会看不见 -->
<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> <a href="#">产品</a></li>
<li> <a href="#">关于</a></li>
</ul>
<!-- 导航条中使用按钮 -->
<button class="btn btn-default navbar-btn navbar-right">注册</button>
<!-- 导航条中使用表单 -->
<form class="navbar-form navbar-right"><!-- 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>
<br><br><!-- 面包屑导航（路径组件） -->
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">产品列表</a></li>
<li class="active">时尚春款新装</li>
</ol>
</body>
四. 分页组件
分页组件可以提供带有展示页面的功能。
使用演示：
<!-- 分页组件 -->
<ul class="pagination pagination-lg"> <!-- 可设置的尺寸：lg ,默认，sm 和 xs -->
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li> <!-- 设置为首选项 -->
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><a href="#">5</a></li> <!-- 设置为禁用项 -->
<li><a href="#">»</a></li>
</ul>
<br><!-- 分页效果 -->
<ul class="pager"> <!-- 默认会自动居中显示 -->
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
<br>
<ul class="pager"> <!-- 设置分页按钮对齐分页连接 -->
<li class="previous"><a href="#">上一页</a></li>
<li class="next"><a href="#">下一页</a></li>
</ul>
五. 标签组件
<!-- 标签组件 --> <!-- 在文本后面带上标签, 标签的样式有6中：defualt,primary,success,info,warning,danger --> <h3>标签<span class="label label-default">new</span></h3>
六. 徽章组件
<!-- 徽章 -->
<a href="#">未读信息信息<span class="badge">10</span></a>
<br><!-- 按钮中使用徽章 -->
<button class="btn btn-success">
提交<span class="badge">5</span>
</button>
<br><!-- 激活状态自动切换色调 -->
<ul class="nav nav-pills">
<li><a href="active">首页<span class="badge">2</span></a></li>
<li><a href="">咨讯</a></li>
</ul>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
为了满足用户的方便，提供良好的自动提示功能就成为定级公司努力方向。废话少说，看例子2012-01-01
本文主要对javascript中的数据类型转换进行介绍，具有一定的参考价值，下面跟着小编一起来看下吧2016-12-12
JavaScript必知必会(六) delete in instanceof
这篇文章主要介绍了JavaScript必知必会(六) delete in instanceof的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JS实现带鼠标效果的头像及文章列表代码,涉及JavaScript响应鼠标事件动态切换页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
11款基于JavaScript的文件管理器，大多数免费开源，功能并不逊色于那些专业的文件管理程序。2009-10-10
JS跳出循环的5种方法总结(return、break、continue、throw等)
想必大家都遇到过循环遍历时遇到满足条件的时候就跳出循环这样的需求,于是整理了一篇各种循环是如何结束的,这篇文章主要给大家介绍了关于JS跳出循环的5种方法,分别是return、break、continue、throw等的相关资料,需要的朋友可以参考下2024-05-05
两个JavaScript jsFiddle JSBin在线调试器
这两个工具都是刚诞生不久，都还在不断完善中，虽然目前jsFiddle要优于JS Bin，但是我还是更看好后者2010-03-03
在本地使用Excel时，经常会有需要在Excel中添加一些附件文件的需求，今天小编将为大家介绍如何使用前端HTML+JS+CSS技术通过超链接单元格的形式实现在线Excel附件上传、下载和修改的操作，需要的可以参考下2023-08-08
这篇文章主要介绍了JS经典正则表达式笔试题,结合实例形式汇总分析了javascript正则表达式的经典使用技巧,需要的朋友可以参考下2016-12-12
这篇文章主要给大家介绍了关于使用Echarts设置地图并触发点击事件的的相关资料,ECharts是一款基于JavaScript的数据可视化库,可以用于创建各种类型的交互式图表,包括地图,需要的朋友可以参考下2023-09-09
最新评论