<!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. Mysql高级查询 内连接和外连接详解

    一.内连接(INNER JOIN) 1.等值连接 概述:指使用等号"="比较两个表的连接列的值,相当于两表执行笛卡尔后,取两表连结列值相等的记录. 语法: SELECT 列 FRO ...

  2. 20155231 2016-2017-2 《Java程序设计》第6周学习总结

    20155231 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 学习目标 理解流与IO 理解InputStream/OutPutStream的继承架构 理解 ...

  3. Linux - 账户切换授权

    sudo 切换账户 echo myPassword | sudo -S ls /tmp # 直接输入sudo的密码非交互,从标准输入读取密码而不是终端设备 visudo # sudo命令权限添加 /e ...

  4. [C++]指针与引用（应用辨析）

    1.指针变量允许将一个整数经强制转换后赋值给指针变量    Eg:      float *fp;      fp = (float *)5000;//意义:将5000作为一个地址赋给指针变量fp 2 ...

  5. Oracle设置某张表为只读

    Oracle 11g开始支持设置某张表为只读,这样可以防范对某些表的修改,起到一定的安全性. 设置如下: --设置表为只读权限(加锁) ALTER TABLE tab_name READ ONLY ; ...

  6. swift学习第一天－－－常量变量基础数据类型

    import Foundation /** * 1.常量 变量 知识要点:常量的定义用let 变量的定义用var 常量一旦定义便不可再更改. 变量定义之后可以在定义之后的程序中任意地方进行修改. */ ...

  7. UML和模式应用4：初始阶段(7)--其它需求

    1.前言 本文主要讲述除用例的其它需求制品. 2.TODO

  8. passwd: Have exhausted maximum number of retries for service【转】

    使用命令passwd修改密码时,遇到如下问题: # echo 'utf8'|passwd zhangsan --stdin Changing password for user zhangsan. p ...

  9. Python3学习笔记12-定义函数及调用

    函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段,能提高应用的模块性,和代码的重复利用率 Python提供了许多内建函数,比如print().也可以自己创建函数,这被叫做用户自定义函数 ...

  10. 【转】#ifdef __cplusplus+extern "C"的用法

    时常看到别人的头文件中,有这样的代码: #ifdef __cplusplus extern "C" { #endif //一段代码 #ifdef __cplusplus } #en ...