编程 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 相关文章推荐

javascript中注册和移除事件的4种方式

Mar 20 Javascript

JS特殊函数(Function()构造函数、函数直接量)区别介绍

May 19 Javascript

js中opener与parent的区别详细解析

Jan 14 Javascript

js实现select跳转功能代码

Oct 22 Javascript

jquery插件unobtrusive实现片段式加载

Jun 15 Javascript

JavaScript实现基于十进制的四舍五入实例

Jul 17 Javascript

jquery动画效果学习笔记（8种效果）

Nov 13 Javascript

使用HTML5+Boostrap打造简单的音乐播放器

Aug 05 Javascript

Node.js静态服务器的实现方法

Feb 28 Javascript

ES5 模拟 ES6 的 Symbol 实现私有成员功能示例

May 06 Javascript

vue element 关闭当前tab 跳转到上一路由操作

Jul 22 Javascript

Vue中keep-alive组件的深入理解

Aug 23 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&MYSQL服务器配置说明

2006/10/09 PHP

网友原创的PHP模板类代码

2008/09/07 PHP

jQuery 类twitter的文本字数限制带提示效果插件

2010/04/16 Javascript

jquery easyui滚动条部分设置介绍

2013/09/12 Javascript

jquery submit ie6下失效的原因分析及解决方法

2013/11/15 Javascript

javascript回车完美实现tab切换功能

2014/03/13 Javascript

jquery和css3实现的炫酷时尚的菜单导航

2014/09/01 Javascript

javascript中Object使用详解

2015/01/26 Javascript

javascript获取系统当前时间的方法

2015/11/19 Javascript

基于jquery实现简单的手风琴特效

2015/11/24 Javascript

详解AngularJS实现表单验证

2015/12/10 Javascript

arcgis for js 修改infowindow样式的方法

2016/11/02 Javascript

JavaScript实现翻页功能(附效果图)

2017/02/16 Javascript

Angular2搜索和重置按钮过场动画

2017/05/24 Javascript

JavaScript编程设计模式之构造器模式实例分析

2017/10/25 Javascript

Vue 实现列表动态添加和删除的两种方法小结

2018/09/07 Javascript

Vue实现本地购物车功能

2018/12/05 Javascript

vue实现手机号码的校验实例代码（防抖函数的应用场景）

2019/09/05 Javascript

uni-app实现点赞评论功能

2019/11/25 Javascript

在Linux上安装Python的Flask框架和创建第一个app实例的教程

2015/03/30 Python

python判断字符串编码的简单实现方法(使用chardet)

2016/07/01 Python

Python3.6 Schedule模块定时任务(实例讲解)

2017/11/09 Python

NetworkX之Prim算法(实例讲解)

2017/12/22 Python

Flask框架搭建虚拟环境的步骤分析

2019/12/21 Python

python 自动识别并连接串口的实现

2021/01/19 Python

英国评分最高的女性剃须刀订阅盒：FFS Beauty

2018/01/25 全球购物

美国一家运动专业鞋类零售商：Warehouse Shoe Sale（WSS）

2018/03/28 全球购物

美国购买汽车零件网站：Buy Auto Parts

2018/04/02 全球购物

英国厨房与餐具用品为主的设计品牌：Joseph Joseph

2018/04/26 全球购物

教师读书活动总结

2014/05/07 职场文书

海洋科学专业求职信

2014/08/10 职场文书

研修心得体会

2014/09/04 职场文书

2014年质量工作总结

2014/11/22 职场文书

2016年师德学习心得体会

2016/01/12 职场文书

JavaScript实现简单计时器

2021/06/22 Javascript

使用pd.merge表连接出现多余行的问题解决

2022/06/16 Python