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. Angular1.x 之Providers (Value, Factory, Service and Constant )
			
    官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...
    
			
    2. 
						
  2. malloc()函数，calloc()函数，realloc()函数，free()函数
			
    malloc()函数 头文件:#include <stdlib.h> malloc() 函数用来动态地分配内存空间,其原型为:void* malloc (size_t size); [参数 ...
    
			
    3. 
						
  3. CAShapeLayer的使用[1]
			
    CAShapeLayer的使用[1] 使用CoreAnimation绘制动画带来的系统开销非常的小,CoreAnimation通常都是使用GPU的. CAShapeLayer属于CoreAnimati ...
    
			
    4. 
						
  4. Python语言特性
			
    1 Python的函数参数传递 看两个例子: a = 1 def fun(a): a = 2 fun(a) print a # 1 a = [] def fun(a): a.append(1) fun ...
    
			
    5. 
						
  5. [原]Ubuntu 下安装apache+PHP
			
    1.安装apache2 sudo apt-get install apache2 运行如下命令重启:sudo /etc/init.d/apache2 restart 在浏览器里输入http://loc ...
    
			
    6. 
						
  6. 021.12 IO流 ObjectStream对象序列化
			
    内容:通过文件存储对象我们遇到的问题,需要保存对象到硬盘中,如何解决这个就是用来解决的 用法:1.创建流对象FileOutputstream2.创建ObjectOutputStream对象与FileO ...
    
			
    7. 
						
  7. 第04章-VTK基础（7）
			
    [译者:这个系列教程是以Kitware公司出版的<VTK User's Guide -11th edition>一书作的中文翻译(出版时间2010年.ISBN: 978-1-930934- ...
    
			
    8. 
						
  8. InputStream TO byte
			
    public class ByteToInputStream { public static final InputStream byte2Input(byte[] buf) { return new ...
    
			
    9. 
						
  9. 2、Android-UI（布局待完成）
			
    2.3.布局 实现界面的整齐摆放各种控件需要使用布局来完成 布局是一种可用于放置很多控件的容器 可以按照一定的规律调整内部的控件位置 布局的内部不仅可以放置控件还可以放置布局 1.线性布局 Linea ...
    
			
    10. 
						
  10. 更有效率的使用Visual Studio
			
    工欲善其事,必先利其器.虽然说Vim和Emacs是神器,但是对于使用Visual Studio的程序员来说,我们也可以通过一些快捷键和潜在的一些功能实现脱离鼠标写代码,提高工作效率,像使用Vim一样使 ...
    
			
    11.