本文实例为大家分享了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="/UploadFiles/2021-04-02/jquery-2.1.0.js">效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
bootstrap,输入框组
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“bootstrap输入框组使用方法”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍