第四章之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 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
如何更好的编写js async函数
May 13 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
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
Python版中国省市经纬度
2020/02/11 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python3运算符常见用法分析
2020/02/14 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
黄河象教学反思
2014/02/10 职场文书
认购协议书范本
2014/04/22 职场文书
教师求职信范文
2014/05/24 职场文书
经营目标管理责任书
2014/07/25 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
收银员岗位职责范本
2015/04/07 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
初中美术教学反思
2016/02/17 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL