首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 11, 2017

Bootstrap输入框和导航组件

一.下拉菜单

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

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

示例效果:

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

学习使用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 相关文章推荐
suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）
Dec 20 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
微信小程序的线程架构【推荐】
May 14 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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
数据类型(8) 触发器(3) enumerate(1) metaclass(1) zip(1) Geospatial(1) Bean(3) XML(1) 自动化(1) IOC(3)
You might like
php设计模式之单例模式使用示例
2014/01/20 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
PHP中的类型约束介绍
2015/05/11 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python使用turtule画五角星的方法
2015/07/09 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
jupyter 导入csv文件方式
2020/04/21 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
英国图书音像网站：Hive.co.uk（图书、电子书、DVD、蓝光、音乐CD等）
2017/10/16 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
教师档案管理制度
2014/01/23 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
《四季》教学反思
2014/04/08 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
离婚协议书范本（2014版）
2014/09/28 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
教师远程研修感悟
2015/11/18 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android