<!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. CM记录-CDH故障修复处理记录

    CDH大数据集群修复记录 1)cm web打不开,查看监听7180端口产生了很多进程,于是kill进程:重启cloudera-cmf-server服务,几秒钟就挂了,查看cloudera-scm-se ...

  2. Spark记录-Spark-Shell客户端操作读取Hive数据

    1.拷贝hive-site.xml到spark/conf下,拷贝mysql-connector-java-xxx-bin.jar到hive/lib下 2.开启hive元数据服务:hive  --ser ...

  3. python学习笔记9--日志模块logging

    我们在写程序的时候经常会打一些日志来帮助我们查找问题,这次学习一下logging模块,在python里面如何操作日志.介绍一下logging模块,logging模块就是python里面用来操作日志的模 ...

  4. Winform程序双向绑定

    程序比较简单,一看就明白,主要需要实现INotifyPropertyChanged using System; using System.Collections.Generic; using Syst ...

  5. <hr />改变颜色

    其实,<hr />是有默认的border的,改变border颜色即可改变hr颜色. 例如: <hr style="position: relative;top: 2.3re ...

  6. mongodb系列~mongodb数据迁移

    一 简介:今天来聊聊mongo的数据迁移二 迁移   1 具体迁移命令   nohup mongodump --port --db dbname --collection tablename --qu ...

  7. 解决ipad连接不上电脑的问题

    检查一下信息: 1.iTunes是否安装 2.数据线是否完好 3.检查下图中的两个设备是否开启 4.最后一步是最恶心的:是否关闭了防火墙!!!! 操作步骤如下图示 我就是因为打开了防火墙,所以一直连接 ...

  8. Android Retrofit 2.0使用

    实例带你了解Retrofit 2.0的使用,分享目前开发Retrofit遇到的坑和心得. 添加依赖 app/build.gradle 1 compile 'com.squareup.retrofit2 ...

  9. python读写文件字符集

    操作I/O的能力是由操作系统的提供的,每一种编程语言都会把操作系统提供的低级C接口封装起来供开发者使用,Python也不例外.  读写文件是需要请求操作系统去操作磁盘的  所以默认的编码就是你平台的编 ...

  10. ubuntu 禁用 guest 账户

    第一步: run the command(s) below:        (编辑如下文件) sudo vi /usr/share/lightdm/lightdm.conf.d/50-ubuntu.c ...