betway必威-betway必威官方网站
做最好的网站

必威官方网站学习使用Bootstrap输入框,bootstrap输

金玉锦绣效益图如下:

Bootstrap输入框和导航组件

Bootstrap 帮助的另一个性子,输入框组。输入框组扩大自 表单控件。使用输入框组,可以很轻松地向基于文本的输入框加多作为前缀和后缀的文书或开关。

必威官方网站 1

壹.下拉菜单

向输入域增加前缀和后缀的内容

当本身点击 开关时,会增多一行输入框组;当点击 - 开关时,会去除这一行输入框组

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

<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg">
@
<input type="text" class="form-control" placeholder="twitterhandle">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
.00
</div>
<br>
<div class="input-group">
$
<input type="text" class="form-control">
.00
</div>
</form>
</div>

html代码如下:

开关和菜单须求包裹在.dropdown 的器皿里,而作为被点击的因素开关供给设置datatoggle=”dropdown”本领使得。对于菜单部分,设置 class=”dropdown-menu”本领自动隐藏并累加固定样式。设置 class=”caret”表示箭头,可上可下。

复选框和单选插件作为输入框组的前缀恐怕后缀成分

<div class="input-group" id="centerIpGroup"> 
  <label class="input-group-addon" id="basic-addon5">中心机IP:</label>   
  <button class="btn btn-info" type="button" data-toggle="tooltip" title="新增" id="addCenterIpGrpBtn" onclick="addCenterIpGrp(this)" disabled></button>    
</div> 

演示效果:

<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">

<input type="checkbox">

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

<input type="radio">

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

按键 点击触发事件函数:

必威官方网站 2

按键作为输入框组的前缀恐怕后缀成分

//添加中心机IP输入框项 
  function addCenterIpGrp(obj){ 
    html = '<div class="input-group centerIp">'  
          '<label class="input-group-addon">IP:</label>'  
          '<input type="text" class="form-control" id="ipInput">'  
          '<label class="input-group-addon">注释:</label>'  
          '<input type="text" class="form-control" id="descInput">'  
          ''  
                '<button class="btn btn-info" type="button" data-toggle="tooltip" title="删除" id="delCenterIpGrp"></button>'  
          ''  
        '</div>' 
    obj.insertAdjacentHTML('beforebegin',html) 
  } 

必威官方网站 3

<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">

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

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

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

</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>
class="input-group-btn"
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default 
dropdown-toggle" data-toggle="dropdown">
下拉菜单 

</button>
<ul class="dropdown-menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
 GO

</button>
<ul class="dropdown-menu">
<li class="dropdown-header">下拉菜单标题</li>
<li><a href="#">A</a></li>
<li class="divider"><</li>
<li><a href="#">B</a></li>
</ul> 
</div>
<input type="text" class="form-control"> 
</div>
<br>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-primary">
 GO
</button> 
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

</button>
<ul class="dropdown-menu">
<li class="dropdown-header">下拉菜单标题</li>
<li><a href="#">A</a></li>
<li class="divider"><</li>
<li><a href="#">B</a></li>
</ul> 
</div>
<input type="text" class="form-control"> 
</div>
<br>

- 开关 点击触发事件函数:

代码:

以上所述是笔者给我们介绍的bootstrap输入框组代码分享,希望对我们享有帮助!

$(document).on('click','#delCenterIpGrp',function(){ 
  var el = this.parentNode.parentNode 
  var centerIp = $(this).parent().parent().find('#ipInput').val() 
  alertify.confirm('您确定要删除选中的命令?', 
  function(e){ 
    if(e){ el.parentNode.removeChild(el)}})}) 
<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>

你可能感兴趣的稿子:

  • Bootstrap CSS组件之输入框组
  • Bootstrap弹出框modal上层的输入框不能够博得主题难点的消除方法
  • Bootstrap基本组件学习笔记之input输入框组(玖)
  • bootstrap下拉列表与输入框组结合的样式调度
  • 运用bootstrap typeahead插件完成输入框自动补全之难点及化解办法
  • Bootstrap三input输入框插入glyphiconLogo的措施
  • bootstrap布局中input输入框左侧Logo点击成效
  • 根据Bootstrap复位输入框内容开关插件
  • 听他们讲Bootstrap使用jQuery达成输入框组input-group的增进与删除
  • bootstrap输入框组件使用方式详解

总结

2.输入框组件

如上所述是小编给我们介绍的bootstrap 加减删除输入框组,希望对我们持有支持,要是我们有其它疑问请给自个儿留言,作者会及时过来我们的。在此也极其谢谢大家对台本之家网址的支持!

文本输入框正是能够在<input>成分前后加上文字或按键,能够兑现对表单控件的扩展。

本文由betway必威发布于网页设计,转载请注明出处:必威官方网站学习使用Bootstrap输入框,bootstrap输

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。