首先看看这行代码: <label for='account'>帐 号</label> <input id='account' name='account' type='text' value='' placeholder='请输入手机号/邮箱' /> <p class='help-block'>请输入您注册时的手机/邮箱</p> <label for='password'>密 码</label> <input id=…

表单之 文本框 text <input type='text' value='' placeholder='输入您的用户名' class='input-mini' /> ①几个类控制文本框长度 input-mini:最小 如图: input-small:次小 如图: input-medium:中等 如图: input-max:最长 如图: spanN:N代表数字,最大12,N表示1个网格的宽度 例如:span4表示对应的input框占用4个网格的宽度 ②属性:placeholder="…

12个表单元素可以分为三大类 第一类:文本类 <input type = "text" /> //普通文本框 <input type = "password" /> //密码文本框 <input type = "hidden" /> //隐藏域 <textrea></textrea> //可变动文本框 第二类:按钮类 <input type = "button"…

表单 格式: <form action=" " method="get/post"  placehoder=" "></form> 表单元素:12个  1.文本类txt-<input type="txt" value="内容"  name="名字(相同的为一类)"  id="身份号(不可重复)"/> - 文本框password-&l…

1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示: 2.给需要的元素添加一个容器,使其居中显示 <div class='container'> <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> </div&g…

代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar navbar-fixed-top:导航固定显示在顶部,对应的navbar-fixed-bottom:导航固定显示在页面底部 .brand:提示文字或者主题 .active:激活选中 .navbar-search:导航搜索 搜索表单: <form class='navbar-search'> &l…

列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编辑器</li> <li>TinyMCE编辑器</li> <li>Kindeditor编辑器</li> </ul> 如图: 有序列表: <ol> <li>Ueditor编辑器</li> <li>…

首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了相应的响应式设计: 比如: 分辨率宽度1200像素以上的屏幕上,网格的宽度会由60px变为70px,且网格与网格之间的距离由20px变为30px 在平板电脑的垂直状…

<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如果用的a标签,href='#collapse1'--> <a href='#collapse1' class='btn btn-primary' data-toggle='collapse'>点击显示内容</a> <!--button标签中指向data-target='#c…

<div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul class='thumbnails'> <li clalss='span2.4'><a class='thumbnail' href=''><img src='http://placehold.it/215x180' alt='我是图片1' /></a><…

导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'>首页</a> <span class='divider'>></span></li> <li><a href='#'>餐厅列表</a> <span class='divider'>></sp…

代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> <!-- 选项卡:通过BS的类来控制选项卡的样式 ?处可以换成以下几个类 .nav-tabs:如图1 .nav-pills:如图2 .nav-tabs nav-stacked:如图3 --> <ul class='nav ?'> <li class='active'><a…

代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> <div class='carousel slide' id='carousel1'> <div class='carousel-inner'> <div class='item active'> <img src='http://placehold.it/1246x360/…

当鼠标点击在一个a连接上时,显示提示文字的效果 ----------------  tooltip <div class='container-fluid'> <h3 class='page-header'>Bootstrap 工具提示</h3> <p style='text-align:center;'><a href='#' rel='tooltip' title='http://www.taobao.com'>淘宝网</a>&l…

提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert alert-info: .alert alert-block: .alert alert-heading: 提示信息按钮: <a href='javascript:;' class='close' data-dismiss='alert'></a> 代码块: <div class=…

首先看看这个代码: <div class='btn-group'> <button type='button' class='btn'>计算机</button> <button type='button' class='btn'>网络</button> <button type='button' class='btn'>桌面项目</button> </div> 将功能相近的按钮分成一组,bootstrap 为我…

bootstrap中的按钮类 一般可以作为按钮的标签有:<a></a>  <button></button>  <input type='button' />上面 如图: 如果要改变按钮的尺寸: .btn-large:尺寸最大: .btn-small:尺寸中等: .btn-mini:尺寸最小 为按钮添加小图标: i标签表示添加的小图标: icon-comment 图标的颜色:默认是黑色,还可以设定白色为 .icon-white <butto…

①了解需要怎样的表格标签结构 ②bootstrap为我们提供了一些类来变换表格样式 1.table中添加 <table class='table'></table> 如图: 2.table中添加 <table class='table table-striped'></table> -- 奇偶行背景色区别 如图: 3.table中添加<table class='table table-bordered'></table> -- 表格显…

网页中标记代码内容使用code和pre标签 要在HTML中显示标签本来的样子需要转化为实体 在此附上百度的实体字符:http://baike.baidu.com/view/4757776.htm#3 code标签标注行内的代码内容 我要在代码中显示如下效果: 需要这么使用code标签 在前面几节中有是否还是记得:我们在 <code><div></div></code>标签中添加了一个类<code>.page-header</code>…

设计弹出层对话框: 设计一个点击登录按钮,再弹出一个登陆对话框的实例,且带有动画效果 <div class='container-fluid'> <h2 class='page-header'>对话框插件的调用</h2> <a href='#login' data-toggle='modal' class='btn btn-primary'>登录</a> <div class='modal hide fade' id='login'>…

带下拉菜单的按钮 <div class='btn-toolbar'> <div class='btn-group'> <a href='javascript:;' class='btn dropdown-toggle' data-toggle='dropdown'>专题 <span class='caret'></span></a> <ul class='dropdown-menu'> <li><a hr…

常用的Css文字标签 一. <p>文字段落Start,<strong>重要的文字</strong>,<em>倾斜的文字用来提示</em>,<abbr class='initialism' title="Content Management System">cms</abbr>是"Content Management System"的简称,文字段落End</p> 说明: 标…

属性大比拼:visibility和display的介绍 今天在做一个表单时涉及到这方面,当选中相应的选项后设置相应的几个元素(控件可见或不可见),后来还是用了visibility来实现.我们先来看下visibility对应的几个属性的介绍: visibility:visible /*元素可见,默认值*/ visibility:hidden /*元素不可见,但仍然为其保留相应的空间*/ visibility:collapse /*只对table对象起作用,能移除行或列但不会影响表格的布局.如果这个…

表单是一个特殊的页面元素,value的值是最受关注的,jQuery提供了强大的val()方法来处理相关的操作. 1.获取表单元素的值. 直接调用val()方法时可以获取选择器的 中的第一个元素的value值.例如: $("[name=radioGroup]:checked").val; 以上代码直接获取属性为radioGroup的表单元素中被选中的value值,十分便捷.对于某些表单元素,例如<option><button>没有value值将获取其显示的文本值.…

1.知识点 lang = “en”   所用语言是英文 文档结构更简洁 IE8一下不支持h5c3 书写更宽松 div没有语义 标签语义化:在合适的地方使用合适的标签 对seo优化友谊 网页经典布局 页头.导航.主题(左右).页尾 max-wifth.min-width:最大最小宽度 <!-- 头部 -->
 <div class="header">
 <ul class="nav"></ul> 
 </div&g…

<jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作 语法格式: <jsp:getProperty name="类的对象名" property="属性名"></jsp:getProperty> name:用于指定JavaBean实例对象的名称.其值和<jsp:useBean>标签的id属性值相同. propery:用于指…

在Bootstra中,表单元素,按钮通过在标签内设置 disabled 或 disabled="disabled" 可以禁用表单元素,按钮.链接需要加入class="disabled" 可以禁用链接. 文本框的禁用:<input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..."…

一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" style="height:900px; backgrou…

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由…

html表单元素 学习要点: 1.表单元素总汇 2.表单元素解析 本章主要探讨HTML5中表单元素,表单元素用于获取用户的输入数据.   一．表单元素总汇 HTML5的表单中,提供了各种可供用户输入的表单控件.           元素名称                                        说明             form          表示HTML表单             input         表示用来收集用户输入数据的控件          …