<!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. .Net MVC个人笔记

    关于转向的问题,目前知道的是Response.Redirect 和 location.href 我现在有两个controller,Home和Test <h2>this is Home< ...

  2. Eclipse快捷键大全,导包快捷键:ctrl+Shift+/【转】

    Ctrl+Shift+L 显示所有快捷键 Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复 ...

  3. java实现《剑指offer》（一）1~10

    每段代码都是在牛客网在线编程通过后,然后拷过来的,准确性可以保证. 1.二维数组中的查找 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入 ...

  4. 动态规划之Fib数列类问题应用

    一,问题描述 有个小孩上楼梯,共有N阶楼梯,小孩一次可以上1阶,2阶或者3阶.走到N阶楼梯,一共有多少种走法? 二,问题分析 DP之自顶向下分析方式: 爬到第N阶楼梯,一共只有三种情况(全划分,加法原 ...

  5. JMS学习(八)-ActiveMQ Consumer 使用 push 还是 pull 获取消息

    ActiveMQ是一个消息中间件,对于消费者而言有两种方式从消息中间件获取消息: ①Push方式:由消息中间件主动地将消息推送给消费者:②Pull方式:由消费者主动向消息中间件拉取消息.看一段官网对P ...

  6. golang string int int64转换

    #string到int int,err:=strconv.Atoi(string) #string到int64 int64, err := strconv.ParseInt(string, 10, 6 ...

  7. JavaScript之12306自动刷新车票[待完善]

    function refresh(){ var search_btn = document.getElementById("query_ticket"); var result_t ...

  8. JavaScript之加载表格、表单行数据[插件]

    /*** * name:加载表格或表单数据[通用] * name:load-table-or-form-data-common.js * * author:zengtai * date:2017-07 ...

  9. drozer工具的安装与使用：之二使用篇

    如果英文好的同学可以直接查看官方文档   官方文档连接:https://labs.mwrinfosecurity.com/assets/BlogFiles/mwri-drozer-user-guide ...

  10. transform 图标旋转，IE8、IE7不兼容

    要将图标旋转,只需使用transform的rotate以及transition即可完成旋转的动画效果.ease 规定慢速开始,然后变快,然后慢速结束的过渡效果;   ease-in 规定以慢速开始的过 ...