Bootstrap表单和图片

学习要点：

　　1.表单

　　2.图片

本节课我们主要学习一下 Bootstrap 表单和图片功能，通过内置的 CSS 定义，显示各 种丰富的效果。

一．表单

Bootstrap 提供了一些丰富的表单样式供开发者使用。

1.基本格式

实现基本的表单样式

form-control样式class类，写在<input>里,设置输入框样式(Bootstrap)
form-group样式class类，写在输入框外面的<div>里,设置输入框与输入框之间的样式(Bootstrap)

<form>

    <div class="form-group">

        <label>电子邮件</label>

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

    </div>

    <div class="form-group">

        <label>密码</label>

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

    </div>

</form>

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

2.内联表单

让表单左对齐浮动，并表现为 inline-block 内联块结构，当小于 768px，会恢复独占样式

form-inline样式class类，写在<form>里,让表单左对齐浮动，并表现为 inline-block 内联块结构，当小于 768px，会恢复独占样式(Bootstrap)

<form class="form-inline">

    <div class="form-group">

        <label>电子邮件</label>

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

    </div>

    <div class="form-group">

        <label>密码</label>

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

    </div>

</form>

大于768px

小于768px

3.表单合组

前后增加片段，给输入框前后加上片段

input-group-addon样式class类，写在input同级的<div>里,给输入框加一个片段(Bootstrap)
input-group样式class类，写在input父级的<div>里,将输入框和片段合并(Bootstrap)

<form class="form-inline">

    <div class="form-group">

        <label>电子邮件</label>

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

    </div>

    <div class="form-group">

        <label>密码</label>

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

    </div>

    <label>金额</label>

    <div class="input-group">

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

        <input type="text" class="form-control">

        <div class="input-group-addon">.00</div>

    </div>

</form>

4.水平排列

让表单内的元素保持水平排列

form-horizontal样式class类，写在<form>里,让表单内的元素保持水平排列(Bootstrap)
col-sm-2样式class类，写在<label>里,给输入框的标题设置所占比例(Bootstrap)
col-sm-10样式class类，写在input的父级<div>里,给输入框设置所占比例(Bootstrap)
control-label样式class类，写在<label>里,让输入框标题和form元素同步(Bootstrap)

<form class="form-horizontal">

    <div class="form-group">

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

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

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

        </div>

    </div>

    <div class="form-group">

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

        </div>

    </div>

</form>

大屏

小屏

注：这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和 父元素样式同步。

5.复选框和单选框

设置复选框，为区块一行

checkbox样式class类，写在input外层<div>里,设置复选框为区块一行样式(Bootstrap)

    <div class="checkbox">

        <label>

            <input type="checkbox">体育

        </label>

    </div>

    <div class="checkbox">

        <label>

            <input type="checkbox">音乐

        </label>

    </div>

设置禁用的复选框

disabled样式class类，写在input外层<div>里,禁止复选框文字选择(Bootstrap)

    <div class="checkbox disabled">

        <label>

            <input type="checkbox" disabled>体育

        </label>

    </div>

    <div class="checkbox">

        <label>

            <input type="checkbox">音乐

        </label>

    </div>

设置内联一行显示的复选框

checkbox-inline样式class类，写在input外层<label>里,设置内联一行显示的复选框(Bootstrap)

    <label class="checkbox-inline disabled">

        <input type="checkbox" disabled>体育

    </label>

    <label class="checkbox-inline">

        <input type="checkbox">音乐

    </label>

设置单选框区块一行显示

radio样式class类，写在input外层<div>里,设置单选框区块一行显示(Bootstrap)

    <div class="radio">

        <label>

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

        </label>

    </div>

        <div class="radio">

        <label>

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

        </label>

    </div>

设置单选框内联一行显示

radio-inline样式class类，写在input外层<div>里,设置单选框内联一行显示(Bootstrap)

    <div class="radio-inline">

        <label>

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

        </label>

    </div>

        <div class="radio-inline">

        <label>

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

        </label>

    </div>

注意：禁用单选框和禁用复选框一样

6.下拉列表

设置下拉列表

form-control样式class类，写在<select>里,设置下拉列表(Bootstrap)

    <select class="form-control">

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <option>4</option>

        <option>5</option>

    </select>

7.校验状态

设置校验状态，也就是设置输入框的校验状态样式，

has-error样式class类，写在input最外层<div>里,设置校验状态，也就是设置输入框的校验状态样式，错误状态(Bootstrap)
has-success样式class类，写在input最外层<div>里,设置校验状态，也就是设置输入框的校验状态样式，成功状态(Bootstrap)
has-warning样式class类，写在input最外层<div>里,设置校验状态，也就是设置输入框的校验状态样式，警告状态(Bootstrap)

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

        </div>

    </div>

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

        </div>

    </div>

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

        </div>

    </div>

label 标签同步相应状态，如果标题名字没有同步校验状态可以在label标签加class="control-label"同步

control-label样式class类，写在要同步样式的标签里,将当前元素与最外层div样式同步，也就共用样式(Bootstrap)

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

        </div>

    </div>

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

        </div>

    </div>

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

        </div>

    </div>

8.给输入框添加额外的文字图标

文本框右侧内置文本图标

glyphicon样式class类，写在input同级的<span>里,设置文本图标基础样式(Bootstrap)
glyphicon-ok样式class类，写在input同级的<span>里,设置文本图标(Bootstrap)
form-control-feedback样式class类，写在input同级的<span>里,设置文本图标的位置(Bootstrap)
has-feedback样式class类，写在input最外层的<div>里,将文本图标位置应用到输入框(Bootstrap)

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

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

        </div>

    </div>

图标样式

glyphicon-ok样式class类，写在input同级的<span>里,成功状态图标(Bootstrap)
glyphicon-warning-sign样式class类，写在input同级的<span>里,警告状态图标(Bootstrap)
glyphicon-remove样式class类，写在input同级的<span>里,错误状态图标(Bootstrap)

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

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

        </div>

    </div>

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

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

        </div>

    </div>

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

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

        </div>

    </div>

9.输入框控制尺寸

从大到小

input-lg样式class类，写在<input>里,大尺寸输入框(Bootstrap)
input-sm样式class类，写在<input>里,小尺寸输入框(Bootstrap)

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

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

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

            <input type="text" class="form-control input-lg" placeholder="请输入名称">

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

        </div>

    </div>

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

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

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

            <input type="text" class="form-control" placeholder="请输入名称">

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

        </div>

    </div>

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

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

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

            <input type="text" class="form-control input-sm" placeholder="请输入名称">

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

        </div>

    </div>

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。

二．图片

Bootstrap 提供了一些丰富的图片样式供开发者使用。

1.图片形状

img-rounded样式class类，写在<img>里,设置图片圆角样式(Bootstrap)
img-circle样式class类，写在<img>里,设置图片圆形，图片时正方形的就是圆形，图片时长方形的就是椭圆(Bootstrap)
img-thumbnail样式class类，写在<img>里,设置图片缩略图样式(Bootstrap)

<img src="img/pic.png" alt="图片" class="img-rounded">

<img src="img/pic.png" alt="图片" class="img-circle">

<img src="img/pic.png" alt="图片" class="img-thumbnail">

 2响应式图片

img-responsive样式class类，写在<img>里,设置图片响应式(Bootstrap)

<img src="img/pic.png" alt="图片" class="img-thumbnail img-responsive">

<img src="img/pic.png" alt="图片" class="img-thumbnail img-responsive">

<img src="img/pic.png" alt="图片" class="img-thumbnail img-responsive">

第二百三十四节，Bootstrap表单和图片的更多相关文章

  1. 第三百三十四节，web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻，爬取Ajax动态生成的信息

    第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息 crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻rul地址 有多 ...

  2. 第二百六十四节，Tornado框架-基于正则的动态路由映射分页数据获取计算

    Tornado框架-基于正则的动态路由映射分页数据获取计算 分页基本显示数据 第一步.设置正则路由映射配置,(r"/index/(?P<page>\d*)", inde ...

  3. 第二百三十八节，Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件 文 ...

  4. 第二百三十九节，Bootstrap路径分页标签和徽章组件

    Bootstrap路径分页标签和徽章组件 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件 ...

  5. 第二百三十五节，Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...

  6. 第二百三十六节，Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  7. 第二百三十三节，Bootstrap表格和按钮

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

  8. 第二百二十四节，jQuery EasyUI，ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  9. 第二百七十四节，同源策略和跨域Ajax

    同源策略和跨域Ajax 什么是同源策略  尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措 ...

随机推荐

  1. TestNG 七 annotation

    TestNG中用到的annotation的快速预览及其属性. @BeforeSuite:   被注释的方法将在所有测试运行前运行 @AfterSuite:  被注释的方法将在所有测试运行后运行 @Be ...

  2. Python函数：使用谷歌翻译翻译英语字符串

    代码是同事写的,我把它单独抠出来,可以作为工具函数使用.当然,性能还是个问题,有待解决. import random import cookielib import urllib import url ...

  3. maven中如何指定jdk的版本

    问题再现: 当我们每次创建maven项目时,jdk的默认版本是1.5,而我们一般机器上安装的是1.7以上的版本,jdk版本不一样,遇到这种问题,有两种解决办法: 至于右键设置jdk版本不推荐,在此不作 ...

  4. BitConverter.GetBytes(int)和BitConverter.ToString 方法 (Byte[])

    BitConverter.ToString 方法 (Byte[]) 网址:https://msdn.microsoft.com/zh-cn/library/3a733s97(v=vs.110).asp ...

  5. 正则表达式：日期，电话，邮箱等常用字符串；js中日期的带下的比较，获取不同格式的日期

    一.日期 (1)首先需要验证年份,显然,年份范围为 0001 - 9999,匹配YYYY的正则表达式为: [0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1- ...

  6. JMeter 十四：最佳实践

    参考:http://jmeter.apache.org/usermanual/best-practices.html 1. 总是使用最新版本的JMeter 2. 使用合适数目的Thread Threa ...

  7. ajax请求接口数据

    var api = 'http://192.168.68.208:666/ajax/api.ashx'; // api += 'action=/api/blackhistory/list&ke ...

  8. Call to undefined function mysql_connect()

    Fatal error: Call to undefined function mysql_connect() in /data/www/qy_b2b/include/db_mysql.class.p ...

  9. C# -- 使用递归列出文件夹目录及目录下的文件 神技do{}while(false)

    C# -- 使用递归列出文件夹目录及目录下的文件 使用递归列出文件夹目录及目录的下文件 1.使用递归列出文件夹目录及目录下文件,并将文件目录结构在TreeView控件中显示出来. 新建一个WinFor ...

  10. C# DateTime的11种构造函数 [Abp 源码分析]十五、自动审计记录 .Net 登陆的时候添加验证码 使用Topshelf开发Windows服务、记录日志 日常杂记——C#验证码 c#_生成图片式验证码 C# 利用SharpZipLib生成压缩包 Sql2012如何将远程服务器数据库及表、表结构、表数据导入本地数据库

    C# DateTime的11种构造函数   别的也不多说没直接贴代码 using System; using System.Collections.Generic; using System.Glob ...