<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 50px;"> <!-- <form class="form-inline"> 内联表单,让所有表单元素居于一行 --> <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="请输入您的电子邮件"></input> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" placeholder="请输入您的密码"></input> </div> </div> <div class="checkbox"> <label> <input type="checkbox">体育</input> </label> </div> <div class="checkbox"> <label> <input type="checkbox" disabled>音乐</input> </label> </div> <label class="checkbox-inline"> <input type="checkbox">体育</input> </label> <label class="checkbox-inline"> <input type="checkbox" disabled>音乐</input> </label> <label class="radio-inline disabled"> <input type="radio" disabled>男</input> </label> <select class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </form> <form> <div class="form-group has-success has-feedback"> <label class="control-label">电子邮件</label> <input type="email" class="form-control" placeholder="请输入您的电子邮件"></input> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group"> <label>密码</label> <input type="password" class="form-control input-lg" placeholder="请输入您的密码"></input> <input type="password" class="form-control input-lg" placeholder="请输入您的密码"></input> </div> <div class="input-group"> <div class="input-group-addon">¥</div> <input type="text" class="form-control" placeholder="请输入您的价格"></input> <div class="input-group-addon">.00</div> </div> </form> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 50px;"> <img src="img/aaa.jpg" class="img-rounded" alt="图片"> <img src="img/aaa.jpg" class="img-circle" alt="图片"> <img src="img/aaa.jpg" class="img-thumbnail img-responsive" alt="图片"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图:
相关推荐
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。本文给大家介绍Bootstrap表单与图片的相关资料,需要的朋友可以参考下
第4章数据库应用 Entity Framework介绍 Code First Database First 创建测试数据 小结 第二部分数据处理 第5章表的查询、排序、分页 Author查询 Author排序 Author分页 小结 第6章表单处理 在表单中...
第4章讲解了CSS样式的优化,包含页面排版优化、表格设计优化、表单设计优化、按钮设计,以及图片和图标的设计等内容;第5~8章则分别讲解了CSS动态样式LESS的特性和使用、各种Bootstrap组件的特性和使用、各种...
第一章 bootstrap介绍 第二章 排版样式 ...第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮组件 第八章 输入框和导航组件 .............共二十章,后面带开发实例!
第4章 Bootstrap插件 l 动画过渡 2 Bootstrap中的JS插件 2.1 模态框 操作案例1:利用模态窗体制作百度登录框 2.2 轮播图 操作案例2:利用.Bootstrap制作携程网首页的轮播图 2.3 选项卡 2.4 折叠 操作案例3:利用...
第1章 Bootstrap介绍 第2章 排版样式 第3章 表格和按钮 第4章 表单和图片 第5章 栅格系统 ...... 共18个章节整理学习
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5表单的应用 例4-1 表单
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5表单的应用 例4-2 常用表单控件
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5 表单的应用 例4-11 HTML5 表单验证
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5 表单的应用 例4-9 HTML5 表单验证
本章属于该系列的高级部分,将介绍表单中一些列的配置 1、config列的配置: 主要用于控制布局 :config:{autoLayout:true|’1,2,2,4′} true:根据配置项最里层的数量来自动使用不同的栅格, ‘1,2,2,4’:使用...
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5 表单的应用 例4-8 计算两个数的和
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5表单的应用 例4-4 label
什么是 Bootstrap?...自动以布局就是根据autoLayout来决定使用的栅格,通过设置autoLayout:’1,2,1,2,2,4′ 表示 第一、二列占3格,第三列占6格子 自动布局代码如下所示(https://github.com/xiexinge
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5表单的应用 例4-7 datalist
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5表单的应用 例4-6 fieldset
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5表单的应用 例4-5 select
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5表单的应用 例4-3 textarea