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. Qt消息机制和事件、事件过滤
			
    一,事件 事件(event)是由系统或者 Qt 本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键盘事件等 ...
    
			
    2. 
						
  2. 使用mathjax在博客中完美显示数学公式，支持PC，手机浏览器
			
    在博客园的设置选项里 有页头HTML的框内输入: <script type="text/javascript" src="http://cdn.mathjax.or ...
    
			
    3. 
						
  3. byr面经两则
			
    人人,金山西山居,腾讯互娱,微信,网易游戏offer及面经 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Offer及笔经面经 ),这篇文章对我帮助很大. 我写这篇文章一是为了感 ...
    
			
    4. 
						
  4. 用适配器模式处理复杂的UITableView中cell的业务逻辑
			
    用适配器模式处理复杂的UITableView中cell的业务逻辑 适配器是用来隔离数据源对cell布局影响而使用的,cell只接受适配器的数据,而不会与外部数据源进行交互. 源码: ModelCell ...
    
			
    5. 
						
  5. React学习笔记（七）条件渲染
			
    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
    
			
    6. 
						
  6. MVC与EF结合：Contoso大学
			
    中文教程 1.通过 MVC 5 使用 Entity Framework 6 Code First 入门 https://docs.microsoft.com/zh-cn/aspnet/mvc/over ...
    
			
    7. 
						
  7. Metaspliot进行漏洞扫描
			
    Metaspliot进行漏洞扫描 Metasploit框架是Metasploit项目中最著名的创作,是一个软件开发.测试和利用漏洞的平台.它可以用来创建安全测试工具开发的模块,也可利用模块作为一个渗透 ...
    
			
    8. 
						
  8. angularJs的作用域和依赖注入
			
    一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找  &rootScope这是全局作用域 <!DOCTYPE HTML&g ...
    
			
    9. 
						
  9. 关于Struts2通配符无效的说明
			
    在struts2.3之前的版本,正常的配置就可以了,但在struts2.3版本之后,使用通配符调用方法时,内部会验证是否允许访问该方法. 1.struts2.5 为了增加安全性,在 struts.xm ...
    
			
    10. 
						
  10. Kali-linux使用SET实施攻击
			
    前面介绍了社会工程学工具包(SET)的简单使用.为了能帮助用户更容易的理解社会工程学的强大功能.本节将介绍使用社会工程学工具包实施各种攻击. 7.4.1 针对性钓鱼攻击向量 针对性钓鱼攻击向量通过构造 ...
    
			
    11.