<!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. JS文本框获取焦点

    所谓焦点,就是鼠标移上文本框的时候那个一闪一闪的光标.

  2. JAVA记录-String/StringBuilder/StringBuffer区别

  3. Hive记录-Hive on Spark环境部署

    1.hive执行引擎 Hive默认使用MapReduce作为执行引擎,即Hive on mr.实际上,Hive还可以使用Tez和Spark作为其执行引擎,分别为Hive on Tez和Hive on ...

  4. canvas实现时钟

    最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟.直接上代 ...

  5. AtCoder Regular Contest 077 E - guruguru

    https://arc077.contest.atcoder.jp/tasks/arc077_c 有m个点围成一个圈,按顺时针编号为1到m,一开始可以固定一个位置x,每次操作可以往顺时针方向走一步或直 ...

  6. CircleList-使用UGUI实现的圆形列表

    CircleList CircleList是一个通过UGUI实现的圆形列表,通过缩放.平移和层级的改变模拟一个3D的圆形列表. 效果 添加与旋转 间距调整 椭圆形的旋转 参数 CenterX: 椭圆圆 ...

  7. mysql手工注入总结

    mysql -u 用户名 -p 密码 -h IP地址 show databases;   查看数据库 select version(); php注入的版本号 use database(表名): sho ...

  8. 《深入理解java虚拟机》第三章 垃圾收集器与内存分配策略

    第三章 垃圾收集器与内存分配策略 3.1 概述 哪些内存需要回收 何时回收 如何回收 程序计数器.虚拟机栈.本地方法栈3个区域随线程而生灭. java堆和方法区的内存需要回收.   3.2 对象已死吗 ...

  9. C++中的memset、zeroMemory和={0}操作（ 转）

    使用C/C++编程时,常使用ZeroMemory.memset或 “={0}”来对结构体对象进行初始化或清零.然而这三种方式都有各自的特点,使用时需谨慎,否则容易出现严重错误,本人今日解决一个导致宕机 ...

  10. WINFROM窗体实现圆角

    首先我们先看看效果图 接下来我们看看怎么实现 先把窗体的FromBorderStyle属性改成None. 接下来登录窗体代码代码: 添加一个窗体Paint事件,引用using System.Drawi ...