编程 Javascript

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

Posted in Javascript onMay 11, 2017

Bootstrap输入框和导航组件

一.下拉菜单

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

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

示例效果:

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

代码：

<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>元素前后加上文字或按钮，可以实现对表单控件的扩展。

例如实现下列的效果：

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

代码示例：

<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 页面的栏目操作,导航条是网站中作为导航页头的响应式基础组件。

示例效果：

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

代码：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

Cynthia_ying

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

document.write()及其输出内容的样式、位置控制

Aug 12 Javascript

js获取时间并实现字符串和时间戳之间的转换

Jan 05 Javascript

JS组件Bootstrap Table表格多行拖拽效果实现代码

Dec 08 Javascript

浅析JavaScript中浏览器的兼容问题

Apr 19 Javascript

Bootstrap菜单按钮及导航实例解析

Sep 09 Javascript

JS正则表达式修饰符global(/g)用法分析

Dec 27 Javascript

带你快速理解javascript中的事件模型

Aug 14 Javascript

推荐VSCode 上特别好用的 Vue 插件之vetur

Sep 14 Javascript

jquery自定义显示消息数量

Dec 19 jQuery

jquery实现搜索框功能实例详解

Jul 23 jQuery

VUE 配置vue-devtools调试工具及安装方法

Sep 30 Javascript

关于vue路由缓存清除在main.js中的设置

Nov 06 Javascript

es6学习笔记之Async函数基本教程

May 11 #Javascript

Bootstrap模态框插件使用详解

May 11 #Javascript

canvas实现弧形可拖动进度条效果

May 11 #Javascript

es6学习笔记之Async函数的使用示例

May 11 #Javascript

Node.js安装配置图文教程

May 10 #Javascript

使用bootstrap插件实现模态框效果

May 10 #Javascript

详解Vue用axios发送post请求自动set cookie

May 10 #Javascript

You might like

PHP编程与应用

2006/10/09 PHP

PHP中break及continue两个流程控制指令区别分析

2011/04/18 PHP

浅析PKI加密解密 OpenSSL

2013/07/01 PHP

php使用异或实现的加密解密实例

2013/09/04 PHP

IE与FireFox的兼容性问题分析

2007/04/22 Javascript

支持ie与FireFox的剪切板操作代码

2009/09/28 Javascript

《JavaScript高级程序设计》阅读笔记（二） ECMAScript中的原始类型

2012/02/27 Javascript

在图片上显示左右箭头类似翻页的代码

2013/03/04 Javascript

javascript标签在页面中的位置探讨

2013/04/11 Javascript

javascript常用函数归纳整理

2014/10/31 Javascript

angularjs客户端实现压缩图片文件并上传实例

2015/07/06 Javascript

JS基于cookie实现来宾统计记录访客信息的方法

2015/08/04 Javascript

JavaScript jQuery 中定义数组与操作及jquery数组操作

2015/12/18 Javascript

用vue的双向绑定简单实现一个todo-list的示例代码

2017/08/03 Javascript

jQuery实现的页面遮罩层功能示例【测试可用】

2017/10/14 jQuery

3种vue组件的书写形式

2017/11/29 Javascript

angularjs select 赋值 ng-options配置方法

2018/02/28 Javascript

vue中如何去掉空格的方法实现

2018/11/09 Javascript

vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

2020/02/25 Javascript

小程序实现上传视频功能

2020/08/18 Javascript

如何实现vue的tree组件

2020/12/03 Vue.js

python单例模式实例分析

2015/04/08 Python

python+django加载静态网页模板解析

2017/12/12 Python

Python实现基于C/S架构的聊天室功能详解

2018/07/07 Python

解决pyttsx3无法封装的问题

2018/12/24 Python

瑞士隐形眼镜和护理产品网上商店：Linsenklick

2019/10/21 全球购物

涉外经济法专业毕业生推荐信

2013/11/24 职场文书

电气工程及自动化专业自荐书范文

2013/12/18 职场文书

检察官就职演讲稿

2014/01/13 职场文书

班主任班级寄语大全

2014/04/04 职场文书

学位证书委托书

2014/09/30 职场文书

公司2015年终工作总结

2015/05/26 职场文书

学校就业保障协议书

2019/06/24 职场文书

导游词之宁夏贺兰山岩画

2019/11/08 职场文书

python如何进行基准测试

2021/04/26 Python

企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍

2021/11/21 数码科技