Bootstrap输入框

Bootstrap输入框



基本用法


1.新建一个web项目ch13,将ch12里面的css文件和js文件拷贝过来。


2.打开ch13的demo01.html将头文件导入进来。


3.Bootstrap输入框的基本用法实例


   <div class="container">

<h1>基本用法</h1>

     <div class="input-group">

//首先给它一个样式说明它是文本框和小图标的组合

<span class="input-group-addon">@</span>

//头部的显示文本

     <input type="text" class="form-control" />

//中间加一个文本框,占满整个容器。

<span class="input-group-addon">.00</span>

//尾部的显示文本

   </div>


4.运行效果


inputbox1.png


5.我们也可以将前面设置成小图标


<div class="input-group">

<span class="input-group-addon glyphicon glyphicon-user"></span>

//前面也可以用小图标来代替

<input type="text" class="form-control" />

</div>


6.运行效果


inputbox2.png



尺寸设置


1.设置尺寸大、中、小


(只需要在在input-group容器上加一个“input-group-lg”或者“input-group-sm”)


inputbox3.png


2.运行效果


inputbox4.png



复选框加addon


1.不使用小图标,在addon里面加一个复选框checkbox。


<div class="input-group">

<span class="input-group-addon">

<input type="checkbox" />

</span>

<input type="text" class="form-control" />

</div>


2.运行效果


inputbox5.png



按钮加addon


1.按钮加addon实例


<hr/>

   <div class="input-group">

//首先给出<div>并给出它的样式

   <span class="input-group-btn">

//按钮加addon

//input-group里面btn这个样式自动会给你做成圆角,也就是addon的样式。

<button type="button" class="btn btn-danger">OK</button>

//按钮我们要给个样式,比如:btn-danger。

</span>

   <input type="text" class="form-control" />

</div>

2.运行效果


inputbox6.png



下拉菜单按钮作为addon

1.下拉菜单按钮作为addon实例


<div class="input-group">

//首先是一个input-group的容器

<div class="input-group-btn">

//"input-group-btn"里面允许有多个按钮

 <button type="button" 

 class="btn btn-default dropdown-toggle"

 data-toggle="dropdown">

       Action

    <span class="caret"></span>

//向下的小三角

 </button>

//其实这个地上是"input-group-btn",然后它相当于组合了两个按钮,

//一个是Action这个按钮,一个是下拉箭头的按钮。

//我们只是把下拉箭头的按钮放在里面了,当点击它的时候要出现个下拉框。

 <ul class="dropdown-menu">

     <li><a href="#">项目</a></li>

      <li><a href="#">项目</a></li>

      <li><a href="#">项目</a></li>

     </ul>

    </div>

     <input type="text" class="form-control" />

  </div>

</div>


2.运行效果


inputbox7.png



分段按钮作为addon


1.在input-group-btn这个样式里面我们可以给多个按钮


inputbox8.png


2.运行效果


(第一个个按钮的左上角和左下角都会是圆角,后面两个按钮会取消圆角。


inputbox9.png


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值