编程 Javascript

bootstrap输入框组使用方法

Posted in Javascript onFebruary 07, 2017

本文实例为大家分享了bootstrap输入框组的使用方法，供大家参考，具体内容如下

<!doctype html>
<html>
<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>Bootstrap</title>
 <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="input-group"><!--输入框组-->
    <span class="input-group-addon">@</span>
    <!--input-group-addon给输入框前后添加辅助的额外元素-->
    <input type="text" class="form-control"/>
   </div>
  </div>
  <!--输入框组的大小-->
  <div class="row" style="margin-top:10px;">
   <div class="input-group input-group-lg">
   <!--input-group-lg为输入框组尺寸还有md,sm-->
    <span class="input-group-addon">@</span>
    <!--给输入框前后添加辅助的额外元素-->
    <input type="text" class="form-control"/>
   </div>
  </div>
  <div class="row" style="margin-top:10px;">
   <div class="input-group">
    <span class="input-group-addon">
     <input type="checkbox"/>
     <!--输入框组添加额外元素为checkbox，还可以是radio-->
    </span>
    <input type="text" class="form-control"/>
   </div>
  </div>
  <div class="row" style="margin-top:10px;">
   <div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-btn">
     <button class="btn btn-default">搜索</button>
    </span>
   </div>
  </div>
  <div class="row" style="margin-top:10px;">
   <div class="input-group">
    <div class="input-group-btn">
     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">学院课程<span class="caret"></span></button>
     <ul class="dropdown-menu">
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >css</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >javascript</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >less</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bootstrap</a></li>
     </ul>
    </div>
    <input type="text" class="form-control"/>
   </div>
  </div>
 </div>
 <script src="js/jquery-2.1.0.js"></script>
 <script src="js/bootstrap.js"></script>
</body>
</html>

效果图：

bootstrap输入框组使用方法

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

bootstrap输入框组使用方法

- Author -

轻扰时光

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

IE6下js通过css隐藏select的一个bug

Aug 16 Javascript

基于jquery的滑动样例代码

Nov 20 Javascript

基于jquery的用鼠标画出可移动的div

Sep 06 Javascript

jquery购物车实时结算特效实现思路

Sep 23 Javascript

JavaScript返回0-1之间随机数的方法

Apr 06 Javascript

AngularJS基础 ng-readonly 指令简单示例

Aug 02 Javascript

Vuejs第十三篇之组件——杂项

Sep 09 Javascript

Vue的watch和computed方法的使用及区别介绍

Sep 06 Javascript

JSON.stringify()方法讲解

Jan 31 Javascript

微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

Mar 30 Javascript

微信小程序云开发（数据库）详解

May 17 Javascript

浅谈js数组splice删除某个元素爬坑

Oct 14 Javascript

angularjs使用directive实现分页组件的示例

Feb 07 #Javascript

Bootstrap下拉菜单样式

Feb 07 #Javascript

基于JavaScript实现购物车功能

Feb 07 #Javascript

js实现类bootstrap模态框动画

Feb 07 #Javascript

canvas实现探照灯效果

Feb 07 #Javascript

javascript数据类型详解

Feb 07 #Javascript

JS简单获取当前年月日星期的方法示例

Feb 07 #Javascript