>

读书应用Bootstrap输入框,Bootstrap基本组件学习笔

- 编辑:www.bifa688.com -

读书应用Bootstrap输入框,Bootstrap基本组件学习笔

行使input输入框组,能够很轻松地向基于文本的输入框增加作为前缀和后缀的公文或按键。

Bootstrap输入框和导航组件

本文实例为大家分享应用jQuery完结输入框组input-group的充裕与删除操作,供大家参照他事他说加以考察,具体内容如下

看上边包车型大巴事例:

一.下拉菜单

留心这里供给选拔到Bootstrap框架的输入框组,如:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://www.qjdongsheng.com/uploads/allimg/190626/2251135464-0.jpg"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>input控件组</title>
</head>
<body>
<div class="container">
 <div class="col-lg-3"></div>
 <div class="col-lg-6">
 <div class="page-header">
 <h1>样式1</h1>
 </div>
 <div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-btn">
 <button type="button" class="btn btn-primary">搜索</button>
 </div>
 </div>
 <div class="page-header">
 <h1>样式2</h1>
 </div>
 <div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-btn">
 <div class="dropdown">
  <button type="button" class="btn btn-primary" data-toggle="dropdown">
  下拉菜单

  </button>
  <ul class="dropdown-menu">
  <li class="active"><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li class="divider"></li>
  <li><a href="#">菜单3</a></li>
  <li><a href="#">菜单4</a></li>
  </ul>
 </div>
 </div>
 </div>
 </div>
 <div class="col-lg-3"></div>
</div>
</body>
</html>

下拉菜单,就是点击三个要素或按键,触发隐藏的列表显示出来。

<div class="row"> 
 <div class="col-lg-6"> 
 <div class="input-group"> 

  <input type="checkbox" aria-label="..."> 

  <input type="text" class="form-control" aria-label="..."> 
 </div><!-- /input-group --> 
 </div><!-- /.col-lg-6 --> 
 <div class="col-lg-6"> 
 <div class="input-group"> 

  <input type="radio" aria-label="..."> 

  <input type="text" class="form-control" aria-label="..."> 
 </div><!-- /input-group --> 
 </div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 

效益如下:

开关和菜单须求包裹在.dropdown 的容器里,而作为被点击的因素按键需求安装datatoggle=”dropdown”能力管用。对于菜单部分,设置 class=”dropdown-menu”技能自动隐藏并累加固定样式。设置 class=”caret”表示箭头,可上可下。

德姆o案例的意义图:

图片 1

躬行实践效果:

图片 2

借使和input同盟使用的开关是不足单击的,只是用于文字的验证,修改如下:

图片 3

那边提供自制的 插件 inputGroup.js

<div class="input-group">
 <input type="text" class="form-control">
 <div class="input-group-addon">用来搜索</div>
</div>

图片 4

参数为能够安装 输入框组中中间的控件是文本域依旧输入框;以及安装在输入框组左边的操作的情节。

成效如下:

代码:

动用inputGroup.js只要在对应的容器,如div中增加采用器,然后利用jQuery获取该选拔器对应的jQuery对象,调用 initInputGroup方法就能够。
inputGroup.js

图片 5

<body>
  <!-- 下拉菜单 -->
  <div class="dropdown"> <!-- 加上open会默认显示下拉菜单选项的内容 -->
  <!-- <div class="btn-group dropup"> 向上弹出式 -->
    <button class="btn btn-default" data-toggle="dropdown">
      下拉菜单
       <!-- 三角符号:当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">
      下拉菜单

    </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>
/** 
 * Created by DreamBoy on 2016/4/29. 
 */ 
$(function() { 
 $.fn.initInputGroup = function (options) { 
  //1.Settings 初始化设置 
  var c = $.extend({ 
   'widget' : 'input', 
   'add' : "", 
   'del' : "" 
  }, options); 

  var _this = $(this); 

  //添加序号为1的输入框组 
  addInputGroup(1); 

  /** 
   * 添加序号为order的输入框组 
   * @param order 输入框组的序号 
   */ 
  function addInputGroup(order) { 
   //1.创建输入框组 
   var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>"); 
   //2.输入框组的序号 
   var inputGroupAddon1 = $(""); 
   //3.设置输入框组的序号 
   inputGroupAddon1.html(" "   order   " "); 

   //4.创建输入框组中的输入控件(input或textarea) 
   var widget = '', inputGroupAddon2; 
   if(c.widget == 'textarea') { 
    widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>"); 
    inputGroupAddon2 = $(""); 
   } else if(c.widget == 'input') { 
    widget = $("<input class='form-control' type='text'/>"); 
    inputGroupAddon2 = $(""); 
   } 

   //5.创建输入框组中最后面的操作按钮 
   var addBtn = $("<button class='btn btn-default' type='button'>"   c.add   "</button>"); 
   addBtn.appendTo(inputGroupAddon2).on('click', function() { 
    //6.响应删除和添加操作按钮事件 
    if($(this).html() == c.del) { 
     $(this).parents('.input-group').remove(); 
    } else if($(this).html() == c.add) { 
     $(this).html(c.del); 
     addInputGroup(order 1); 
    } 
    //7.重新排序输入框组的序号 
    resort(); 
   }); 

   inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2); 

   _this.append(inputGroup); 
  } 

  function resort() { 
   var child = _this.children(); 
   $.each(child, function(i) { 
    $(this).find(".input-group-addon").eq(0).html(' '   (i   1)   ' '); 
   }); 
  } 
 } 
}); 

假如大家还想浓厚学习,能够点击这里拓展学习,再为我们附3个能够的专题:

二.输入框组件

Demo案例——InputGroupDemo
目录结构如下:

Bootstrap学习课程

文件输入框就是足以在<input>成分前后加上文字或按键,能够达成对表单控件的扩大。

图片 6

Bootstrap实战教程

举个例子落到实处下列的职能:

index.html

Bootstrap插件使用教程

图片 7

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <title>输入框组</title> 
 <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> 
 <style> 
  /*.input-group-add .input-group { 
   margin: 10px 0; 
  }*/ 
 </style> 

 <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />--> 
 <!--[if lt IE 9]> 
 <script src="js/html5shiv.js"></script> 
 <script src="js/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
 <div class="container"> 
  <div class="input-group-add"> 
   <!--<div class="input-group"> 
     1  
    <!–<input type="text" class="form-control" aria-label="...">–> 
    <textarea class="form-control"></textarea> 

     <button class="btn btn-default" type="button">   </button> 

   </div>--> 
  </div> 
 </div> 

 <script src="js/jquery-1.11.1.min.js"></script> 
 <script src="js/bootstrap.min.js"></script> 
 <script src="inputGroup.js"></script> 
 <script> 
  $(function() { 
   $('.input-group-add').initInputGroup({ 
    'widget' : 'textarea', //输入框组中间的空间类型 
    /*'add' : '添加', 
    'del' : '删除'*/ 
   }); 
  }); 
 </script> 
</body> 
</html> 

上述便是本文的全体内容,希望对大家的求学抱有扶助,也可望大家多多扶助脚本之家。

代码示例:

假如输入框组中的中间控件要求input,则能够安装:

你恐怕感兴趣的文章:

  • 读书运用Bootstrap输入框、导航、分页等常用组件
  • Bootstrap输入框组件轻巧完毕代码
  • bootstrap输入框组件使用办法详解
  • Bootstrap CSS组件之输入框组
  • Bootstrap3 input输入框插入glyphiconLogo的格局
  • bootstrap下拉列表与输入框组结合的体制调度
  • bootstrap布局中input输入框左侧图标点击作用
  • 依附Bootstrap使用jQuery达成输入框组input-group的增进与删除
  • BootStrap点击下拉菜单项后显示二个新的输入框完结代码
  • Bootstrap输入框组件使用详解
<body>
  <!-- 输入框组件 -->
  <!-- 左侧添加文字 -->
  <div class="input-group">
    @
    <input type="text" class="form-control">
  </div>

  <br><!-- 右侧添加文字 -->
  <div class="input-group">
    <input type="text" class="form-control">
    @
  </div>

  <br><!-- 两侧添加文字,并设置为最大号的输入框 -->
  <div class="input-group input-group-lg">
    ¥
    <input type="text" class="form-control">
    .00
  </div>

  <br><!-- 加复选框 -->
  <div class="input-group">
    <input type="checkbox">
    <input type="text" class="form-control">
  </div>
  <br><!-- 加单选框 -->
  <div class="input-group">
    <input type="radio">
    <input type="text" class="form-control">
  </div>

  <br><!-- 使用按钮 -->
  <div class="input-group">
    <input class="form-control">

      <button class="btn btn-default">提交</button>

  </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">
          下拉菜单

        </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>
$('.input-group-add').initInputGroup({ 
    'widget' : 'input', //输入框组中间的空间类型 
    /*'add' : '添加', 
    'del' : '删除'*/ 
   }); 

三. 导航条组件

如故不开始展览设置,因为默许中间控件为input。
当中央调控件为input的功用如下:

导航组件,用于落到实处 Web 页面包车型地铁栏目操作,导航条是网址中作为导航页头的响应式基础零部件。

图片 8

亲自过问效果:

假使大家还想浓厚学习,能够点击这里拓展学习,再为大家附3个能够的专项论题:

图片 9

Bootstrap学习课程

代码:

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>

Bootstrap插件使用教程

四. 分页组件

上述便是本文的全部内容,希望对大家的学习抱有扶助。

分页组件能够提供含有展示页面包车型客车效率。

你只怕感兴趣的小说:

  • 上学生运动用Bootstrap输入框、导航、分页等常用组件
  • Bootstrap输入框组件简单完结代码
  • bootstrap输入框组件使用办法详解
  • Bootstrap CSS组件之输入框组
  • Bootstrap基本组件学习笔记之input输入框组(9)
  • Bootstrap3 input输入框插入glyphiconLogo的主意
  • bootstrap下拉列表与输入框组结合的体制调节
  • bootstrap布局中input输入框左侧Logo点击效率
  • BootStrap点击下拉菜单项后显得二个新的输入框完结代码
  • Bootstrap输入框组件使用详解

动用演示:

<!-- 分页组件 -->
  <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>标签new</h3>

六. 徽章组件

<!-- 徽章 -->
  <a href="#">未读信息信息10</a>
  <br><!-- 按钮中使用徽章 -->
  <button class="btn btn-success">
    提交5
  </button>
  <br><!-- 激活状态自动切换色调 -->
  <ul class="nav nav-pills">
    <li><a href="active">首页2</a></li>
    <li><a href="">咨讯</a></li>
  </ul>

如上便是本文的全部内容,希望对我们的上学抱有协助,也可望大家多多协助脚本之家。

你或者感兴趣的小说:

  • Bootstrap输入框组件轻巧完成代码
  • bootstrap输入框组件使用格局详解
  • Bootstrap CSS组件之输入框组
  • Bootstrap基本组件学习笔记之input输入框组(9)
  • Bootstrap3 input输入框插入glyphiconLogo的秘籍
  • bootstrap下拉列表与输入框组结合的体制调节
  • bootstrap布局中input输入框左侧Logo点击功效
  • 据说Bootstrap使用jQuery达成输入框组input-group的增进与删除
  • BootStrap点击下拉菜单项后显得一个新的输入框实今世码
  • Bootstrap输入框组件使用详解

本文由必发88官网发布,转载请注明来源:读书应用Bootstrap输入框,Bootstrap基本组件学习笔