新浦京81707con > 注册购买 > 基础十三,输入框组

原标题:基础十三,输入框组

浏览次数:93 时间:2019-06-26

运用 Bootstrap class 向按键增加下拉菜单。如需向按键增加下拉菜单,只要求轻易地在在四个 .btn-group 中放置按键和下拉菜单就可以。也能够选拔 <span ></span> 来提示按键作为下拉菜单。

上边包车型大巴实例演示了五个骨干的简单的按键下拉菜单:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 基本的按钮下拉菜单</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div >     <button type="button"          data-toggle="dropdown">        默认      </button>     <ul  role="menu">        <li><a  >功能</a></li>        <li><a  >另一个功能</a></li>        <li><a  >其他</a></li>        <li ></li>        <li><a  >分离的链接</a></li>     </ul>  </div>  <div >     <button type="button"          data-toggle="dropdown">        原始      </button>     <ul  role="menu">        <li><a  >功能</a></li>        <li><a  >另一个功能</a></li>        <li><a  >其他</a></li>        <li ></li>        <li><a  >分离的链接</a></li>     </ul>  </div>    </body>  </html>

结果如下所示:

图片 1

Bootstrap 支持的另二个性情,输入框组。输入框组增添自 表单控件。使用输入框组,能够很轻易地向基于文本的输入框增添作为前缀和后缀的文书或按键。

经过向输入域加多前缀和后缀的剧情,您能够向用户输入增多公共的元素。比方,能够增多澳元符号,只怕在 Facebook 用户名前增加 @,大概应用程序接口所急需的其余公共的要素。

向 .form-control 增加前缀或后缀成分的步骤如下:

  • 把前缀后后缀成分放在二个带有 class .input-group 的 <div> 中。
  • 继之,在同等的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的剧情。
  • 把该 <span> 放置在 <input> 元素的日前或许前边。

图片 2为了保持跨浏览器的兼容性,请制止使用 <select> 成分,因为它们在 WebKit浏览器中不可能完全渲染出作用。也不要一向向表单组应用输入框组的 class,输入框组是两个孤立的机件。

嵌套

您能够在四个开关组内嵌套另二个开关组,即,在三个 .btn-group 内嵌套另贰个 .btn-group 。当你向让下拉菜单与一多元按键组合使用时,就能够用到这几个。

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 嵌套的按钮组</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div >    <button type="button" >按钮 1</button>    <button type="button" >按钮 2</button>      <div >      <button type="button"          data-toggle="dropdown">        下列              </button>      <ul >        <li><a  >下拉链接 1</a></li>        <li><a  >下拉链接 2</a></li>      </ul>    </div>  </div>    </body>  </html>

结果如下所示:

图片 3

划分的开关下拉菜单

划分的开关下拉菜单使用与下拉菜单按键大致一样的体制,不过对下拉菜单增加了本来的功用。分割按键的左臂是原来的成效,左侧是显得下拉菜单的切换。

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 分割的按钮下拉菜单</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div >     <button type="button" >默认</button>     <button type="button"          data-toggle="dropdown">                切换下拉菜单     </button>     <ul  role="menu">        <li><a  >功能</a></li>        <li><a  >另一个功能</a></li>        <li><a  >其他</a></li>        <li ></li>        <li><a  >分离的链接</a></li>     </ul>  </div>  <div >     <button type="button" >原始</button>     <button type="button"          data-toggle="dropdown">                切换下拉菜单     </button>     <ul  role="menu">        <li><a  >功能</a></li>        <li><a  >另一个功能</a></li>        <li><a  >其他</a></li>        <li ></li>        <li><a  >分离的链接</a></li>     </ul>  </div>    </body>  </html>

结果如下所示:

图片 4

着力的输入框组

上面包车型客车实例演示了大旨的输入框组:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 基本的输入框组</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div  >     <form  role="form">        <div >           @           <input type="text"  placeholder="twitterhandle">        </div>        <br>          <div >           <input type="text" >           .00        </div>        <br>        <div >           $           <input type="text" >           .00        </div>     </form>  </div>      </body>  </html>

结果如下所示:

图片 5

骨干的按键组

上边包车型客车实例演示了上边表格中研商到的 class .btn-group 的使用:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 基本的按钮组</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div >    <button type="button" >按钮 1</button>    <button type="button" >按钮 2</button>    <button type="button" >按钮 3</button>  </div>    </body>  </html>

结果如下所示:

图片 6

按键上拉菜单

美食做法也足以后上拉伸的,只供给轻松地向父 .btn-group 容器加多 .dropup 即可。

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 按钮上拉菜单</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div   >     <div >        <button type="button"             data-toggle="dropdown">           默认         </button>        <ul  role="menu">           <li><a  >功能</a></li>           <li><a  >另一个功能</a></li>           <li><a  >其他</a></li>           <li ></li>           <li><a  >分离的链接</a></li>        </ul>     </div>     <div >        <button type="button"             data-toggle="dropdown">           原始         </button>        <ul  role="menu">           <li><a  >功能</a></li>           <li><a  >另一个功能</a></li>           <li><a  >其他</a></li>           <li ></li>           <li><a  >分离的链接</a></li>        </ul>     </div>  </div>    </body>  </html>

结果如下所示:

图片 7

 

 

 

多种小说:

Bootstrap <基础一> css 概览

Bootstrap<基础二>互连网种类

Bootstrap<基础三>排版

Bootstrap<基础四> 代码

Bootstrap <基础五>表格

Bootstrap<基础六> 表单

Bootstrap <基础七>按钮

Bootstrap <基础八>图片

Bootstrap<基础九>辅助类

Bootstrap<基础十> 响应式实用工具

Bootstrap<基础十一>字体Logo(Glyphicons)

Bootstrap <基础十二>下拉菜单(Dropdowns)

Bootstrap<基础十三> 开关组

Bootstrap<基础十四> 开关下拉菜单

Bootstrap<基础十五> 输入框组

Bootstrap<基础十六> 导航成分

Bootstrap<基础十七>导航栏

Bootstrap <基础十八>面包屑导航(Breadcrumbs)

Bootstrap <基础十九>分页

Bootstrap<基础二十> 标签

Bootstrap <基础二十一>徽章(Badges)

Bootstrap <基础二十二>超大显示器(Jumbotron)

Bootstrap <基础二十三>页面标题(Page Header)

Bootstrap<基础二十四> 缩略图

Bootstrap <基础二十五>警告(Alerts)

Bootstrap <基础二十六>进程条

Bootstrap<基础二十七> 多媒体对象(Media Object)

Bootstrap <基础二十八>列表组

Bootstrap <基础二十九>面板(Panels)

Bootstrap <基础三十>Well

Bootstrap <基础三十一>插件大概浏览

Bootstrap <基础三十二>模态框(Modal)插件


复选框和单选插件

能够把复选框和单选插件作为输入框组的前缀或然后缀成分,如下边的实例所示:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 输入框组的复选框和单选插件</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div  >     <form  role="form">        <div >           <div >              <div >                                     <input type="checkbox">                                  <input type="text" >              </div><!-- /input-group -->           </div><!-- /.col-lg-6 --><br>           <div >              <div >                                     <input type="radio">                                  <input type="text" >              </div><!-- /input-group -->           </div><!-- /.col-lg-6 -->        </div><!-- /.row -->     </form>  </div>      </body>  </html>

结果如下所示:

图片 8

按键工具栏

下边包车型客车实例演示了地方表格中研究到的 class .btn-toolbar 的使用:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 按钮工具栏</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div  role="toolbar">    <div >    <button type="button" >按钮 1</button>    <button type="button" >按钮 2</button>    <button type="button" >按钮 3</button>   </div>    <div >    <button type="button" >按钮 4</button>    <button type="button" >按钮 5</button>    <button type="button" >按钮 6</button>    </div>    <div >    <button type="button" >按钮 7</button>    <button type="button" >按钮 8</button>    <button type="button" >按钮 9</button>    </div>  </div>    </body>  </html>

结果如下所示:

图片 9

本文由新浦京81707con发布于注册购买,转载请注明出处:基础十三,输入框组

关键词: 新浦京81707con

上一篇:【葡京网上娱乐】枚举类型使用示例

下一篇:没有了