LVS Java Out Of Memory WorldCloud sorting listview razor browser vue使用教程 angular视频教程 pmp教学视频 ubuntu更改文件夹权限 bootstrap居中对齐 python编程 python多线程 python输出函数 python课程 python抛异常 python创建文件 java最新框架 如何安装java环境 java集合转数组 java的输入 java连接sql数据库 java中scanner用法 运行时错误1004 音频频谱分析软件 苹果5s降级 cg模宝 html特殊符号 fireworks8 dnf武极刷图加点 文字转语音软件免费版 ps3d字体 处理器虚拟化技术 cad自动保存位置 海蜘蛛软路由 搜狐影音播放器 vs2017密钥 数据库同步解决方案 ae蒙版和遮罩
当前位置: 首页 > 学习教程  > 

Bootstrap输入框组

2020/10/16 17:43:18 文章标签: bootstrap文本框

向.form-control添加前缀或后缀元素的步骤如下&#xff1a; &#xff08;1&#xff09;把前缀或后缀元素放在一个带有class.input-group的<div>中 &#xff08;2&#xff09;在相同的<div>内&#xff0c;在class为.input-group-addon的<span>内放置额外的内…

向.form-control添加前缀或后缀元素的步骤如下:

1)把前缀或后缀元素放在一个带有class.input-group<div>中2)在相同的<div>内,在class为.input-group-addon<span>内放置额外的内容3)把<span>放置在<input>元素的前面或者后面

1.基本输入框组

//邮箱输入框组,不用输入@ 和 .com
<div class="input-group">
         <input type="text" class="form-control">//一个基本的输入框
         <span class="input-group-addon">@</span>//添加的@
         <input type="text" class="form-control">//一个基本的输入框
         <span class="input-group-addon">.com</span>//添加后缀.com
</div>

可以通过 input-group-lg ,input-group-sm来控制输入框的大小
2.复选框和单选框

 <div class="input-group">
               <span class="input-group-addon">
                  <input type="checkbox">
               </span>//设置一个选项的按钮
               <input type="text" class="form-control">
 </div><!-- /input-group -->
//单选框
 <span class="input-group-addon">
                  <input type="radio">
 </span>

3.按钮插件
把按钮作为输入框的前缀或者后缀元素,不是添加.input-group-addon而是需要class .input-group-btn

<div class="input-group">
               <input type="text" class="form-control">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button">//增加一个按钮,显示为Go!
                     Go!
                  </button>
               </span>
 </div><!-- /input-group -->

4.带有下拉菜单的按钮

<div class="input-group"> //输入的为一组
     <div class="input-group-btn">//增加一个按钮
 <button type="button" class="btn btn-default dropdown-toggle" 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 class="divider"></li>
        <li><a href="#">分离的链接</a></li>
     </ul>
 </div><!-- /btn-group -->
 <input type="text" class="form-control">//输入框
 </div><!-- /input-group -->

本文链接: http://www.dtmao.cc/news_show_300028.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?