第四章之BootStrap表单与图片


Posted in Javascript onApril 25, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.表单
2.图片

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

一.表单

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

1.基本格式

//实现基本的表单样式
<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 内联块结构
<form class="form-inline">

注:当小于 768px,会恢复独占样式

3.表单合组

//前后增加片段
<div class="input-group">
<div class="input-group-addon">¥</div>

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

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

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" class="form-control" placeholder="请输入您的电子邮件">
</div>
</div>
</form>

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

5.复选框和单选框

//设置复选框,在一行
<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> 
//设置单选框
<div class="radio disabled">
<label> <input type="radio" name="sex" disabled>男</label>
</div>

6.下拉列表

//设置下拉列表
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

7.校验状态

//设置为错误状态
<div class="form-group has-error">

注:还有其他状态如下:

样式说明

has-error错误状态

has-success成功状态

has-warning警告状态
//label 标签同步相应状态
<label class="control-label">Input with success</label>

8.添加额外的图标

//文本框右侧内置文本图标
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

注:除了 glyphicon-ok 外,还有几个如下表:

 样式说明
glyphicon-ok成功状态

glyphicon-warning-sign警告状态

glyphicon-remove错误状态

9.控制尺寸

//从大到小
<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">

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

二.图片

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

1.图片形状

//三种形状
<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"> 
//响应式图片
<img src="img/pic.png" alt="图片" class="img-responsive">

以上所述是小编给大家介绍的Bootstrap表单与图片的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
JS实现动态生成html table表格的方法分析
Jul 11 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
第五章之BootStrap 栅格系统
Apr 25 #Javascript
详解Bootstrap插件
Apr 25 #Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 #Javascript
第六章之辅组类与响应式工具
Apr 25 #Javascript
第七章之菜单按钮图标组件
Apr 25 #Javascript
第九章之路径分页标签与徽章组件
Apr 25 #Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 #Javascript
You might like
ajax缓存问题解决途径
2006/12/06 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
jquery validate demo 基础
2015/10/29 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
python manage.py runserver流程解析
2019/11/08 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
python生成大写32位uuid代码
2020/03/03 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
村委会贫困证明
2014/01/14 职场文书
全陪导游欢迎词
2014/01/17 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏