Bootstrap输入框和导航组件
一.下拉菜单
下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。
按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置datatoggle=”dropdown”才能有效。对于菜单部分，设置 class=”dropdown-menu”才能自动隐藏并添加固定样式。设置 class=”caret”表示箭头，可上可下。
示例效果:
代码：
<body> <!-- 下拉菜单 --> <div> <!-- 加上open会默认显示下拉菜单选项的内容 --> <!-- <div> 向上弹出式 --> <button data-toggle="dropdown"> 下拉菜单 <span></span> <!-- 三角符号：当dropdown换成dropup时候，三角符号箭头会向上 --> </button> <ul> <!-- 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> <button data-toggle="dropdown"> 下拉菜单 <span></span> </button> <ul> <li>网站导航</li> <!-- 设置菜单标题不加超链接 --> <li> <a href="#">首页</a></li> <li> <a href="#">咨讯</a></li> <li> <a href="#">产品</a></li><!-- 设置菜单分割线 --> <li> <a href="#">关于</a></li> <!-- 设置菜单禁用项 --> </ul> </div> </body>
二．输入框组件
文本输入框就是可以在<input>元素前后加上文字或按钮，可以实现对表单控件的扩展。
例如实现下列的效果：
代码示例：
<body> <!-- 输入框组件 --> <!-- 左侧添加文字 --> <div> <span>@</span> <input type="text"> </div> <br><!-- 右侧添加文字 --> <div> <input type="text"> <span>@</span> </div> <br><!-- 两侧添加文字,并设置为最大号的输入框 --> <div> <span>￥</span> <input type="text"> <span>.00</span> </div> <br><!-- 加复选框 --> <div> <span><input type="checkbox"></span> <input type="text"> </div> <br><!-- 加单选框 --> <div> <span><input type="radio"></span> <input type="text"> </div> <br><!-- 使用按钮 --> <div> <input> <span> <button>提交</button> </span> </div> <br><!-- 右侧使用下拉菜单或分页式 --> <div> <input ttype="text"> <div> <button data-toggle="dropdown"> 下拉菜单 <span></span> </button> <ul> <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> <div> <!-- 基本导航条包含标题和列表 --> <div> <a href="#">标题</a> </div> <ul> <li> <a href="#">首页</a></li> <li> <a href="#">咨讯</a></li> <li> <a href="#">产品</a></li> <li> <a href="#">关于</a></li> </ul> <!-- 导航条中使用按钮 --> <button>注册</button> <!-- 导航条中使用表单 --> <form><!-- navbar-right 设置搜索框靠右显示 --> <div> <input type="text"> <div> <button>搜索</button> </div> </div> </form> <!-- 导航条中使用文本 --> <button>登录</button> <p>我是一段文字<a href="#">链接地址</a></p> </div> </nav> <br><br><!-- 面包屑导航（路径组件） --> <ol> <li><a href="#">首页</a></li> <li><a href="#">产品列表</a></li> <li>时尚春款新装</li> </ol> </body>
四. 分页组件
分页组件可以提供带有展示页面的功能。
使用演示：