<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单和图片</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>

<body style="margin:50px;">

<!-- 1.基本表单样式 -->

    <form>

        <div class="form-group">

            <label>电子邮件：</label>

            <input type="email" placeholder="请输入你的电子邮件" class="form-control">

        </div>

        <div class="form-group">

            <label>密码：</label>

            <input type="password" placeholder="请输入你的密码" class="form-control">

        </div>

    </form>

    <!-- 只有正确设置了输入框的type类型，才能被赋予正确的样式。支持的输入框控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、color。 -->

<br/>

<!-- 2.    内联表单 -->

    <form class="form-inline">

        <div class="form-group">

            <label>电子邮件：</label>

            <input type="email" placeholder="请输入你的电子邮件" class="form-control">

        </div>

        <div class="form-group">

            <label>密码：</label>

            <input type="password" placeholder="请输入你的密码" class="form-control">

        </div>

    </form>

<br/>

<!-- 3.表单合组 -->

    <form>

        <div class="input-group">

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

                ￥

            </div>

            <input type="text" class="form-control" placeholder="请输入你的价格">

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

                .00

            </div>

        </div>

    </form>

<br/>

<!-- 4.水平排列 -->

    <form class="form-horizontal">

        <div class="form-group">

            <label class="col-sm-2 control-label">电子邮件：</label>

            <div class="col-sm-10">

                <input type="email" placeholder="请输入你的电子邮件" class="form-control">

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">密码：</label>

            <div class="col-sm-10">

                <input type="password" placeholder="请输入你的密码" class="form-control">

            </div>

        </div>

    </form>

    <!-- 涉及到栅格系统 -->

<br>

<!-- 5.复选框和单选框 -->

    <form class="form-horizontal">

        <!-- 设置复选框在一行 -->

        <div class="checkbox">

            <label>

                <input type="checkbox">体育

            </label>

        </div>

        <div class="checkbox">

            <label>

                <input type="checkbox">音乐

            </label>

        </div>

        <!-- 设置禁用的复选框 -->

        <div class="checkbox disabled">

            <label>

                <input type="checkbox" disabled>语文

            </label>

        </div>

        <!-- 设置内联一行显示的复选框 -->

        <label class="checkbox-inline">

            <input type="checkbox">英语

        </label>

        <label class="checkbox-inline disabled">

            <input type="checkbox" disabled>数学

        </label>

        <br>

        <!-- 设置单选框 -->

        <div class="radio disabled">

            <label>

                <input type="radio" name="sex" disabled>gay

            </label>

            <label>

                <input type="radio" name="sex" disabled>les

            </label>

        </div>

        <label class="radio-inline">

            <input type="radio" name="sex">男

        </label>

        <label class="radio-inline">

            <input type="radio" name="sex">女

        </label>

    </form>

<br>

<!-- 6.下拉列表 -->

    <form>

        <select class="form-control">

            <option>1</option>

            <option>2</option>

            <option>3</option>

            <option>4</option>

            <option>5</option>

        </select>

    </form>

<br>

<!-- 7.校验状态 -->

    <!--

    has-error：错误状态

    has-success：成功状态

    has-warning：警告状态

    -->

    <form>

        <!-- control-label：label标签同步相应状态 -->

        <div class="form-group has-success">

            <label class="control-label">电子邮件：</label>

            <input type="email" class="form-control" placeholder="请输入你的电子邮件">

        </div>

    </form>

<br>

<!-- 8.添加额外的图标 -->

    <!--

    文本框右侧内置文本图标

    glyphicon-ok；成功状态

    glyphicon-warning-sign：警告状态

    glyphicon-remove：错误状态

     -->

     <!-- has-feedback：设置相对点 -->

    <form>

        <div class="form-group has-success has-feedback">

            <label class="control-label">电子邮件：</label>

            <input type="email" class="form-control" placeholder="请输入你的电子邮件">

            <span class="glyphicon glyphicon-ok form-control-feedback"></span>

        </div>

    </form>

<br>

<!-- 9.控制尺寸 -->

    <!--

    input-lg：大

    input-sm：小

    -->

    <form>

        <div class="form-group">

            <label>密码：</label>

            <input type="password" placeholder="请输入你的密码" class="form-control input-lg">

        </div>

    </form>

<br>

<!-- 10.图片 -->

    <!-- 图片形状 -->

    <!--

    img-rounded：圆角矩形

    img-circle：正/椭圆

    img-thumbnail：微缩图

    -->

    <img style="width:800px;height:600px;" src="img/1.jpg" alt="图片" class="img-rounded">

    <img style="width:800px;height:600px;" src="img/1.jpg" alt="图片" class="img-circle">

    <img style="width:800px;height:600px;" src="img/1.jpg" alt="图片" class="img-thumbnail">

    <!-- 响应式图片 -->

    <!-- img-responsive -->

    <img style="width:800px;height:600px;" src="img/1.jpg" alt="图片" class="img-circle img-responsive">

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</body>

</html>

bootstrap之表单和图片的更多相关文章

  1. Bootstrap(4) 表单和图片

    1.表单 基本格式,实现基本的表单样式 <form class="form-horizontal"> <div class="form-group&qu ...

  2. 第二百三十四节，Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表单 Bootstrap ...

  3. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  4. bootstrap 智能表单 demo示例

    1.基本配置,支持的元素类型 2.自动布局 3.自定义布局 4.自定义表单 5.数据绑定 6.带验证的表单 7.智能搜索 8.级联下拉 9.图片上传 图片有点大了,屏幕不够大的话可能看的不习惯,没事 ...

  5. bootstrap课程6 bootstrap的表单注意事项有哪些

    bootstrap课程6 bootstrap的表单注意事项有哪些 一.总结 一句话总结: 1.bootstrap中的表单中的每一项是什么样的形式? div.form-group>label +i ...

  6. Bootstrap之表单控件状态

    Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态.   一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应 ...

  7. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  8. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  9. BootStrap 智能表单系列 十 自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...

随机推荐

  1. 虚拟机下安装ubuntu后root密码登录失败的问题

    问题描述: 在虚拟机下安装了ubuntu中要输入用户名,一般情况下大家都会输入一个自己的网名或绰号之类的,密码也在这时设置过了. 但是当安装成功之后,使用命令#su root,然后输入刚才设置的密码, ...

  2. 【DS】排序算法的稳定性

    主要的排序算法有八种:直接插入排序,希尔排序(这两种统称为插入排序),冒泡排序,快速排序(这两种统称为交换排序),直接选择排序,堆排序(这两种统称为选择排序),归并排序,基数排序.今天我们就讨论一下它 ...

  3. Linux下SVN使用

    转载:参考文章http://www.linuxidc.com/Linux/2011-09/42347.htm 1. 将文件checkout到本地目录     svn checkout path(pat ...

  4. Linux_安装

    总结:    分区-->格式化-->起一个设备文件名(逻辑分区一定从5开始)-->指定挂载点(必须是空的目录名称作为盘幅)

  5. android kotlin Gradle DSL method not found: '1.2.51()'错误，be using a version of the Android Gradle plug-in that does not contain the method (e.g. 'testCompile' was added in 1.1.0).

    同步的时候遇到这个问题,从log上看是因为gradle的版本不包含kotlin 1.2.51这个method,具体原因我也不是很清楚,大概猜测是kotlin版本的问题,而最新的版本就是1.2.51,所 ...

  6. 10-SQL Server 2008 R2安装步骤

    一.  软件和环境 1.  软件 : SQL Server 2008 R2 企业版     软件下载地址:XXXX 2.  环境要求: .Net FrameWork 3.5 以上 (windows 7 ...

  7. 用ajax传递json,返回前台的中文乱码问题

    java项目中用ajax传递json,返回前台时中文出现问号(乱码问题)的解决办法 首先看一下没有解决前的状态: 我用的框架是ssm,在springMVC中我配置了编码格式为utf-8,每个jsp页面 ...

  8. JAVA BufferedReader 类从标准输入读取数据

    1,从标准输入上建立输入流: BufferedReader localReader = new BufferedReader( new InputStreamReader(System.in)); S ...

  9. 表格重新加载 where 携带上次值问题

    表格重载两种方式: 方式一: tableIns.reload(options)   注意这种方式的重载是不会携带上次数据加载时的where值     //使用 第一次渲染返回的对象 var table ...

  10. Hyper-V和其他虚拟机共存 【转】

    由于Windows中Hyper-V的实现方式在系统中为独占,所以其不能与其他的虚拟机共存. 下面的方法是在系统中新增一个启动项,在这个启动项中关闭Hyper-V,这样就可以安装并使用其他虚拟机了.需要 ...