Bootstrap04概述

一.输入框组

1.左侧添加文字

            <div class="input-group">

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

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

            </div>

2.右侧添加文字

            <div class="input-group">

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

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

            </div>

3.两侧添加文字

            <div class="input-group">

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

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

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

            </div>

3.左侧使用复选框+单选框(注意:实现单选框效果,需要添加name属性)

            <div class="input-group">

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

                    <input type="checkbox" name="" id="" value="" />

                </span>

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

            </div>

            <div class="input-group">

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

                    <input type="radio" name="sex" id="" value="" />

                </span>

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

            </div>

            <div class="input-group">

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

                    <input type="radio" name="sex" id="" value="" />

                </span>

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

            </div>

4.右侧使用按钮

            <div class="input-group">

                <input class="form-control" type="text" name="" id="" val..ue="" />

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

                    <button class="btn btn-primary">提交</button>

                </div>

            </div>

5.左侧使用下拉菜单

            <div class="input-group">

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

                    <button class="btn btn-warning" data-toggle="dropdown">搜索												


											
Bootstrap04的更多相关文章
	

    
				

	


随机推荐
	

    
									
  1. 购物车redis存储结构
			
    
			
    2. 
						
  2. golang开发不错的参考资料
			
    https://golangbot.com/learn-golang-series/ https://gist.github.com/ivangabriele/1c552aadc247c0a2f256 ...
    
			
    3. 
						
  3. Apache的配置详解
			
    Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd.conf文件中修改. 主站点的配置(基本配置) (1) 基本配置: ServerRoot "/mnt/s ...
    
			
    4. 
						
  4. Exchange Server  产品路线图 及 补丁下载
			
    Exchange Server RU listExchange Server and Update Rollup Build Numbers -TechNet Articles -United Sta ...
    
			
    5. 
						
  5. ZT 线程的分离状态 2012-08-16 17:00:59
			
    线程的分离状态 2012-08-16 17:00:59 分类: LINUX 其实在写上一篇日志的时候,由于我把创建线程的返回值的判断条件写错了,程序每次运行的时候都是显示创建线程失败,我就百度了一下, ...
    
			
    6. 
						
  6. python3程序设计基本方法
			
    实例 6.升级维护 总结: 打了多年的游击战.突然经过教官的指导,觉得很受益,程序自学需要总结和交流.
    
			
    7. 
						
  7. Vmstat主要关注哪些数据？
			
    除特殊情况外,一般关注飘红部分 任务的信息(procs) r(running) 在internal时间段里,运行队列中的进程数,即表示正在运行或者正在等待CPU时间的进程数,如果这个参数值超过服务器上 ...
    
			
    8. 
						
  8. chrome浏览器Network面板请求Timing分析
			
    Timing显示资源在整个请求生命周期过程中各部分话费的时间. Queueing 排队的时间花费.可能由于该请求被渲染引擎认为是优先级比较低的资源(图片).服务器不可用.超过浏览器并发请求的最大连接数 ...
    
			
    9. 
						
  9. jq弹框  （1）内容自适应宽度  2（内容框显示，几秒后自动消失）
			
      <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&q ...
    
			
    10. 
						
  10. Codeforces-19D   Point---线段树
			
    题目链接: https://cn.vjudge.net/problem/CodeForces-19D 题目大意: n个操作,在200000*200000的平面上加删点 find 严格在坐标右上角,x最 ...
    
			
    11.