第四章之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 相关文章推荐
JavaScript更改字符串的大小写
May 07 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
js变量提升深入理解
Sep 16 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
Python版实现微信公众号扫码登陆
May 28 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
javascript 变量作用域 代码分析
2009/06/26 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
js实现导航跟随效果
2018/11/17 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python检查指定文件是否存在的方法
2015/07/06 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
网上快餐厅创业计划书
2014/02/01 职场文书
学校火灾防控方案
2014/06/09 职场文书
红与黑读书笔记
2015/06/29 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python