首页
所有分类
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 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
js获取ip和地区
Mar 10 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
深入浅出了解Node.js Streams
May 27 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
输入法(2) 鸿蒙(2) Debian(1) 鸿蒙3.0(1) 滚动条(1) win7(2) svg(1) 声卡驱动(1) Sunmao(1) 蓝屏(1)
You might like
Mac系统下安装PHP Xdebug
2018/03/30 PHP
Jquery Ajax学习实例5 向WebService发出请求，返回泛型集合数据的异步调用
2010/03/17 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[01:54]TI珍贵瞬间系列（五）：压力
2020/08/29 DOTA
python随机生成指定长度密码的方法
2015/04/04 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
zookeeper python接口实例详解
2018/01/18 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python 音频生成器的实现示例
2019/12/24 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
捷克钓鱼用品网上商店：Parys.cz
2018/06/15 全球购物
Spartoo瑞典：鞋子、包包和衣服
2018/09/15 全球购物
Zipadee-Zip襁褓过渡毯：Sleeping Baby
2018/12/30 全球购物
德国大型箱包和皮具商店：Koffer
2019/10/01 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
外企求职信范文分享
2013/12/31 职场文书
个人授权委托书
2014/09/15 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
教师党员承诺书2015
2015/01/21 职场文书
加入学生会自荐书
2015/03/05 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
元旦主持词开场白
2015/05/29 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
python pyhs2 的安装操作
2021/04/07 Python
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技