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

学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例

Mar 10 Javascript

JavaScript 小型打飞机游戏实现原理说明

Oct 28 Javascript

js获取判断上传文件后缀名的示例代码

Feb 19 Javascript

动态加载脚本提升javascript性能

Feb 24 Javascript

jquery实现倒计时代码分享

Jun 13 Javascript

基于JavaScript实现根据手机定位获取当前具体位置（X省X市X县X街道X号）

Dec 29 Javascript

关于前后端json数据的发送与接收详解

Jul 30 Javascript

swiper在angularjs中使用循环轮播失效的解决方法

Sep 27 Javascript

angular4强制刷新视图的方法

Oct 09 Javascript

vue图片上传组件使用详解

Dec 23 Javascript

JS代码优化的8点建议

Feb 04 Javascript

Vuejs通过拖动改变元素宽度实现自适应

Sep 02 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中最容易忘记的一些知识点总结

2013/04/28 PHP

XAMPP安装与使用方法详细解析

2013/11/27 PHP

ThinkPHP中ajax使用实例教程

2014/08/22 PHP

php中smarty模板条件判断用法实例

2015/06/11 PHP

总结PHP中数值计算的注意事项

2016/08/14 PHP

一键生成各种尺寸Icon的php脚本(实例)

2017/02/08 PHP

PHP简单装饰器模式实现与用法示例

2017/06/22 PHP

Yii2框架视图(View)操作及Layout的使用方法分析

2019/05/27 PHP

javascript编程起步（第二课）

2007/02/27 Javascript

JavaScript高级程序设计阅读笔记（十三） js定义类或对象

2012/08/14 Javascript

javascript删除option选项的多种方法总结

2013/11/22 Javascript

nodejs批量修改文件编码格式

2015/01/22 NodeJs

JavaScript通过setTimeout实时显示当前时间的方法

2015/04/16 Javascript

JavaScript动态插入CSS的方法

2015/12/10 Javascript

JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法

2017/01/20 Javascript

如何选择jQuery版本 1.x? 2.x? 3.x?

2017/04/01 jQuery

Angular6中使用Swiper的方法示例

2018/07/09 Javascript

浅谈webpack+react多页面开发终极架构

2018/11/11 Javascript

JavaScript实现密码强度实时验证

2020/03/18 Javascript

对python中使用requests模块参数编码的不同处理方法

2018/05/18 Python

python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现

2018/06/11 Python

django解决跨域请求的问题

2018/11/11 Python

使用 Python 玩转 GitHub 的贡献板(推荐)

2019/04/04 Python

Python参数传递及收集机制原理解析

2020/06/05 Python

python 将列表里的字典元素合并为一个字典实例

2020/09/01 Python

使用tkinter实现三子棋游戏

2021/02/25 Python

Dune London官网：英国著名奢华鞋履品牌

2017/11/30 全球购物

九年级体育教学反思

2014/01/23 职场文书

旅游饭店管理专业自荐书

2014/06/28 职场文书

党员教师学习党的群众路线教育实践活动心得体会

2014/10/31 职场文书

薪资证明范本

2015/06/19 职场文书

欢迎新生标语2015

2015/07/16 职场文书

2015年政教主任工作总结

2015/07/23 职场文书

2016秋季田径运动会广播稿

2015/12/21 职场文书

用Python将GIF动图分解成多张静态图片

2021/06/11 Python

python超详细实现完整学生成绩管理系统

2022/03/17 Python