学习使用Bootstrap输入框、导航、分页等常用组件

Bootstrap输入框和导航组件

一.下拉菜单

下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置datatoggle=”dropdown”才能有效。对于菜单部分，设置 class=”dropdown-menu”才能自动隐藏并添加固定样式。设置 class=”caret”表示箭头，可上可下。

示例效果:

代码：

二．输入框组件

文本输入框就是可以在元素前后加上文字或按钮，可以实现对表单控件的扩展。

例如实现下列的效果：

代码示例：

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

<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">

三. 导航条组件

导航组件，用于实现 Web 页面的栏目操作,导航条是网站中作为导航页头的响应式基础组件。

示例效果：

代码：

四. 分页组件

分页组件可以提供带有展示页面的功能。

使用演示：

五. 标签组件

六. 徽章组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!