-
使用bootstrap必须在jQuery之后引用，开头如截图所示查看全部
-
这一小节我们先来讲“动画过渡（Transitions）”这个插件的使用，源文件：transition.js查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多标签支持</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <button class="btn btn-default" type="button">button标签按钮</button> <input type="submit" class="btn btn-default" value="input标签按钮"/> <span class="btn btn-default">span标签按钮</span> <div class="btn btn-default">div标签按钮</div> </body> </html>查看全部
-
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表单控件(复选框和单选按钮水平排列)</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <form role="form-group"> <label class="checkbox-inline"> <input type="checkbox" value="option1">游戏 </label> <label class="checkbox-inline"> <input type="checkbox" value="option2">摄影 </label> <label class="checkbox-inline"> <input type="checkbox" value="option3">旅游 </label> </div> <div class="form-group"> <label class="radio-inline"> <input type="radio" value="option1" name="sex">男性 </label> <label class="radio-inline"> <input type="radio" value="option2" name="sex">女性 </label> <label class="radio-inline"> <input type="radio" value="option3" name="sex">中性 </label> </form> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件——表单控件大小</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <form role="form"> <h3>案例1</h3> <div class="checkbox"> <label> <input type="checkbox" value=""> 记住密码 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked> 喜欢 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate"> 不喜欢 </label> </div> </form> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件——下拉选择框select元素</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <form role="form"> <div class="form-group"> <textarea class="form-control" rows="3"></textarea> </div> </form> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件——下拉选择框select元素</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form> </body> </html>查看全部
-
媒体对象--默认媒体对象 媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分： ☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容 ☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片 ☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容 ☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选查看全部
-
默认进度条：外div progress 内div progress-bar 彩色进度条：外div progress 内div progress-bar progress-bar-success/info/warning/danger 带条纹(彩色)的进度条：外div pregress progress-striped 内div progress-bar progress-bar-success/info/danger.. 动态进度条：外div progress progress-striped active 内div progress-bar progress-bar-success/info.. 层叠进度条（彩色或默认色）： <div class="progress"> <div class="progress-bar progress-bar-success/info.." ></div> <div class="progress-bar progress-bar-success/info.." ></div> </div> 带label的进度条： <div class="progress"> <div class="progress-bar progress-bar-success/info.." role="progressbar" aria-valuenoe="" aria-valuemin="" aria-valuemax="" >40%/20%.. </div>查看全部
-
只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤： 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。 2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。 3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。查看全部
-
在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等查看全部
-
实现原理并不难，列表（<ul>）上设置宽度为“100%”，然后每个菜单项(<li>)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示查看全部
-
GitHub上这样介绍 bootstrap： ☑ 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 ☑ 基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。 ☑ 自定义JQuery插件，完整的类库，基于Less等。查看全部
-
<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。 唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。 请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。查看全部
-
<button> Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。 class="btn"这个是通过预写的CLASS来实现效果的，也就是他通过TYPE是什么类型来给样式，TYPE和CLASS的顺序可以搞动的. 权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”查看全部
举报
0/150
提交
取消