Tomcat HashMap node.js Redis matlotlib dedecms postgresql plugins vbscript interface stack process jaxb usb bootstrap后台模版 jquery的each循环 iot系统 android常用布局 bootstrap模态框传参 arraylist删除指定元素 python数据库 python位运算 python自学教材 java案例 java基础教学 java正则表达式匹配 配置java环境 java获取当前年 java获取ip地址 java实现多线程 如何查看java版本 jdbc连接mysql java类方法 linux命令行 linux目录 莫愁脚本 linux操作系统原理 苹果5s降级 js判断字符串相等 python的用途
当前位置: 首页 > 学习教程  > 

Bootstrap组件_输入框组

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

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>输入框组</title><link rel"stylesheet" href"bootstrap.min.css"> </head> <body><div class"…

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

  <div class="container">
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="email">
    </div>
  </div>
  
</body>
</html>
尺寸

为 .input-group 添加相应的尺寸类,其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个
元素重复地添加控制尺寸的类。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

  <div class="container">
      <div class="input-group input-group-lg">
        <span class="input-group-addon" id="sizing-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" 
aria-describedby="sizing-addon1">
      </div>
      <div class="input-group">
        <span class="input-group-addon" id="sizing-addon2">@</span>
        <input type="text" class="form-control" placeholder="Username" 
aria-describedby="sizing-addon2">
      </div>
      <div class="input-group input-group-sm">
        <span class="input-group-addon" id="sizing-addon3">@</span>
        <input type="text" class="form-control" placeholder="Username" 
aria-describedby="sizing-addon3">
      </div>
  </div>
  
</body>
</html>
作为额外元素的多选框和单选框

可以将多选框或单选框作为额外元素添加到输入框组中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

  <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <div class="input-group">
            <span class="input-group-addon">
              <input type="checkbox" aria-label="true">
            </span>
            <input type="text" class="form-control">
          </div>
        </div>
        <div class="col-lg-6">
          <div class="input-group">
            <span class="input-group-addon">
              <input type="radio">
            </span>
            <input type="text" class="form-control">
          </div>
        </div>
      </div>
  </div>
  
</body>
</html>
作为额外元素的按钮

为输入框组添加按钮需要额外添加一层嵌套,不是 .input-group-addon,而是添加 .input-group-btn 来

包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值,所以才需要这样做。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>

  <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="请输入要查找的内容">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default">
                go!
              </button>
            </span>
          </div>
        </div>
        <div class="col-md-6"></div>
      </div>
  </div>
  
</body>
</html>
作为额外元素的分裂式按钮下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>输入框组</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="jquery-1.12.1.js"></script>
  <script src="bootstrap.min.js"></script>
</head>
<body>

  <div class="container">
      <div class="col-md-6">
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle"
            data-toggle="dropdown" aria-haspopup="true">
              Action
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">1</a></li>
              <li><a href="#">2</a></li>
            </ul>
          </div>
          <input type="text" class="form-control">
        </div>
      </div>
  </div>
  
</body>
</html>

 


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

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?