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. UC 优视发布“UC+”开放平台
			
    7月5日消息,以浏览器起家的UC优视今天在2013移动互联网创新大会上正式发布“UC+”开放平台战略. UC优视公司总裁何小鹏同时表示:通过“UC+”开放平台,UC将UC浏览器全球四亿用户与移动端巨大 ...
    
			
    2. 
						
  2. .net core系列之《在.net core中使用MemoryCache实现本地缓存》
			
    说到内存缓存MemoryCache不由的让我想起.Net Framework中的MemoryCache,它位于 System.Runtime.Caching 程序集中. 接下来我们来看看.net co ...
    
			
    3. 
						
  3. OS考研复习笔记——操作系统的定义、目标、作用和发展的主要动力
			
    计算机系统由硬件和软件两部分组成.操作系统(OS,Operating System)是配置在计算机硬件上的第一层软件,是对硬件系统的首次补充. 硬件:计算机物理设备,即各种处理机存储器.输入/输出设备 ...
    
			
    4. 
						
  4. centos编译安装php7
			
    环境说明 VMware 12 中搭建的CentOS 7 x64 4核 2G内存 环境中已经安装了http://blog.csdn.net/u014595668/article/details/5016 ...
    
			
    5. 
						
  5. 微软报表A4纸大小规则
			
    总页宽:21cm,总页高:29.7cm 上下左右边距均为2.5cm 页眉页脚均为0.75cm 正文内容宽:16cm,高23.2cm
    
			
    6. 
						
  6. 做 fzu oj 1003 简单的枚举
			
    暴力求解法---简单枚举 定义一个函数(函数的内容大概是包含了题目所给的限制条件),然后主函数就是通过循环进行枚举,枚举出可能的元素,带入函数中进行验证,如果符合函数所给的情况,则为其解.
    
			
    7. 
						
  7. PHPmyadmin拿shell总结
			
    PHPmyadmin修改用户密码 直接点击上面的localhost或者1270.0.1,出现用户一栏,点击修改即可 添加超级用户guetsec密码ooxx并且允许外连 GRANT ALL PRIVIL ...
    
			
    8. 
						
  8. 缓存MEMCACHE php调用
			
    在项目中,涉及大访问量时,合理的使用缓存能减轻数据库的压力,同时提升用户体验.即在非实时性的需求的前提下,一小段时间内(若干秒),用于显示的数据从缓存中获取的,而不用直接读取数据库,能有效的减少数据库 ...
    
			
    9. 
						
  9. 翻译-QPKG开发工具快速开始指南
			
    QPKG开发工具快速开始指南 指导你编译你自己的QPKG软件包 目录 什么是QDK 下载QDK 安装QDK 编译你自己的QPKG软件包 搭建QPKG编译环境 配置QPKG 定制QPKG程序 向QPKG ...
    
			
    10. 
						
  10. 关于数据库SQL优化
			
    1.数据库访问优化   要正确的优化SQL,我们需要快速定位能性的瓶颈点,也就是说快速找到我们SQL主要的开销在哪里?而大多数情况性能最慢的设备会是瓶颈点,如下载时网络速度可能会是瓶颈点,本地复制文件 ...
    
			
    11.