编程 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中:表达式和语句的区别[译]

Sep 17 Javascript

jquery入门必备的基本认识及实例(整理)

Jun 24 Javascript

Javascript基础教程之if条件语句

Jan 18 Javascript

jQuery中DOM树操作之使用反向插入方法实例分析

Jan 23 Javascript

jquery实现鼠标滑过显示提示框的方法

Feb 05 Javascript

JS实现FLASH幻灯片图片切换效果的方法

Mar 04 Javascript

JS解析XML文件和XML字符串详解

Apr 17 Javascript

JavaScript中用于四舍五入的Math.round()方法讲解

Jun 15 Javascript

使用canvas实现仿新浪微博头像截取上传功能

Sep 02 Javascript

详解JavaScript的闭包、IIFE、apply、函数与对象

Dec 21 Javascript

原生JS仿QQ阅读点击展开、收起效果

Mar 08 Javascript

基于JavaScript实现单例模式

Oct 30 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关于IE下的iframe跨域导致session丢失问题解决方法

2013/10/10 PHP

PHP按行读取文件时删除换行符的3种方法

2014/05/04 PHP

PHP基于GD库的缩略图生成代码（支持jpg,gif,png格式）

2014/06/19 PHP

PHP实现的注册，登录及查询用户资料功能API接口示例

2017/06/06 PHP

php设计模式之装饰模式应用案例详解

2019/06/17 PHP

腾讯与新浪的通过IP地址获取当前地理位置（省份）的接口

2010/07/26 Javascript

JS打开新窗口的2种方式

2013/04/18 Javascript

JavaScript获取onclick、onchange等事件值的代码

2013/07/22 Javascript

JQuery中$(document)是什么意思有什么作用

2014/07/21 Javascript

JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法

2015/07/01 Javascript

JavaScript中利用Array和Object实现Map的方法

2015/07/27 Javascript

jquery实现像栅栏一样左右滑出式二级菜单效果代码

2015/08/24 Javascript

ECMA5数组的新增方法有哪些及forEach（）模仿实现

2015/11/03 Javascript

详解JavaScript函数对象

2015/11/15 Javascript

js代码实现点击按钮出现60秒倒计时

2021/01/28 Javascript

jQuery实现二维码扫描功能

2017/01/09 Javascript

用director.js实现前端路由使用实例

2017/01/27 Javascript

jQuery异步提交表单实例

2017/05/30 jQuery

Js利用Canvas实现图片压缩功能

2017/09/13 Javascript

React 无状态组件(Stateless Component) 与高阶组件

2018/08/14 Javascript

Vue源码学习之关于对Array的数据侦听实现

2019/04/23 Javascript

JS实现容器模块左右拖动效果

2020/01/14 Javascript

node.js基于dgram数据报模块创建UDP服务器和客户端操作示例

2020/02/12 Javascript

JS判断浏览器类型与操作系统的方法分析

2020/04/30 Javascript

在Python中操作列表之List.pop()方法的使用

2015/05/21 Python

Python使用文件锁实现进程间同步功能【基于fcntl模块】

2017/10/16 Python

Python操作json的方法实例分析

2018/12/06 Python

Schecker荷兰：狗狗用品和配件

2019/06/06 全球购物

大学生简单自荐信

2013/11/10 职场文书

幼教毕业生自我鉴定

2014/01/12 职场文书

生日寿宴答谢词

2014/01/19 职场文书

财务管理专业毕业生求职信

2014/06/02 职场文书

先进党支部申报材料

2014/12/24 职场文书

Vue中插槽slot的使用方法与应用场景详析

2021/06/08 Vue.js

Java实现简易的分词器功能

2021/06/15 Java/Android

Windows和Linux上部署Golang并运行程序

2022/04/22 Servers