第四章之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 相关文章推荐
原生js的弹出层且其内的窗口居中
May 14 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
vue模式history下在iis中配置流程
Apr 17 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jquery选择器简述
2015/08/31 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
Python tkinter事件高级用法实例
2018/01/31 Python
django中模板的html自动转意方法
2018/05/27 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
教师年度考核评语
2014/04/28 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
地陪导游欢迎词
2015/01/26 职场文书
城南旧事读书笔记
2015/06/29 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
初中生物教学反思
2016/02/20 职场文书