学习使用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js有序数组的连接问题
Oct 01 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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获得url参数中具有&amp;的值的方法
2014/03/05 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python OS模块常用函数说明
2015/05/23 Python
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python如何更新包
2020/06/11 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
邮政员工辞职信
2014/01/16 职场文书
自我鉴定标准格式
2014/03/19 职场文书
法制报告会主持词
2014/04/02 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
学校师德师风整改方案
2014/10/28 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android