11.20 Bootstrap
1.动画效果
<div style="height: 1000px;background-color: gold;width: 500px"></div>
$('div').show(3000)
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').show(5000)
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').slideUp(5000) #滑动
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').slideDown(5000)
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').fadeIn(5000) #淡入淡出
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').fadeOut(5000)
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').fadeTo(5000,0.4)
k.fn.init [div, prevObject: k.fn.init(1)]
2.each
一个通用的迭代函数,它可以用来无缝迭代对象和数组。
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
</body>
$.each($('p'),function(index){
console.log(index)
})
0
1
2
3
4
5
6
7
8
9
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]
$.each($('p'),function(index,obj){
console.log(index,obj)
})
0 <p>1</p>
1 <p>2</p>
2 <p>3</p>
3 <p>4</p>
4 <p>5</p>
5 <p>6</p>
6 <p>7</p>
7 <p>8</p>
8 <p>9</p>
9 <p>10</p>
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]
$('p').each(function(index,obj){console.log(index,obj)})
0 <p>1</p>
1 <p>2</p>
2 <p>3</p>
3 <p>4</p>
4 <p>5</p>
5 <p>6</p>
6 <p>7</p>
7 <p>8</p>
8 <p>9</p>
9 <p>10</p>
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]
终止each循环
return false;
3.data
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key,value): 在匹配的元素上存储任意相关数据
.data(key): 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
.removeData(key):移除存放在元素上的数据,不加key参数表示移除所有保存的数据。
$('p').data('username','jason') #设置
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]
$('p').first().data('username') #获取
"jason"
$('p').last().data('username')
"jason"
$('p').last().data('ggd') #不存在的不报错
undefined
$('p').removeData('username') #移除
k.fn.init(10) [p, p, p, p, p, p, p, p, p, p, prevObject: k.fn.init(1)]
$('p').last().data('username')
undefined
4.栅格系统
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4
来创建。多于12个的列会被作为一个整体 另起一行排列。
使用单一的一组.col-md-*
栅格类,就可以创建一个基本的栅格系统。所有列(column)必须放在.row
内。
<div class='row'>
<div class='col-md-1'>.col-md-1</div> #放12个
</div>
<div class='row'>
<div class='col-md-8'>.col-md-8</div>
<div class='col-md-4'>.col-md-4</div>
</div>
流式布局容器:将最外面的布局元素.container
修改为.container-fluid
,就可以将固定宽度的栅格布局转换为100%宽度的布局。
<div class="container-fluid">
<div class="row">
...
</div>
</div>
5.表格
为任意<table>标签添加
.table类可以为其赋予基本的样式
table-hover 鼠标悬停
table-bordered 带边框的表格
table-striped 条纹装表格
.table-responsive 响应式表格
.table-condensed 紧缩表格
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>价格</th>
<th>出版社</th>
<th>作者</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>dkjddjf</td>
<td>122.48</td>
<td>东方出版社</td>
<td>egon,echo</td>
<td class="text-center">
<a href="#" class="btn btn-primary btn-xs">编辑</a>
<a href="#" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>聊斋志异</td>
<td>666.99</td>
<td>北方出版社</td>
<td>kevin,tank</td>
<td class="text-center">
<a href="#" class="btn btn-primary btn-xs">编辑</a>
<a href="#" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
</tbody>
</table>
表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control
类的 <input>
、<textarea>
和 <select>
元素都将被默认设置宽度属性为 width: 100%;
。 将 label
元素和前面提到的控件包裹在 .form-group
中可以获得最好的排列。
为 <form>
元素添加 .form-inline
类可使其内容左对齐并且表现为 inline-block
级别的控件。
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount" placeholder="关键字">
</div>
</div>
<button type="submit" class="btn btn-primary">搜索</button>
<a href="" class="btn btn-success pull-right">新增</a>
</form>
6按钮
为 <a>
、<button>
或 <input>
元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-info" type="submit" value="Submit">
<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
7字体图标
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>
标签,并将图标类应用到这个 <span>
标签上。
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
<span class="glyphicon glyphicon-book pull-right"></span>
8导航条、
务必使用 <nav>
元素,或者,如果使用的是通用的 <div>
元素的话,务必为导航条设置 role="navigation"
属性,这样能够让使用辅助设备的用户明确知道这是一个导航区域。
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
通过添加 .navbar-inverse
类可以改变导航条的外观。
<nav class="navbar navbar-inverse">
...
</nav>
9巨幕
这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角,就把此组件放在所有 .container
元素的外面,并在组件内部添加一个 .container
元素。
10.面板
基本实例:默认的 .panel
组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-primary">...</div>
<div class="panel-heading">Panel heading without title</div> #带标题的面板,可以覆盖.panel-title 类的 <h1>-<h6> 标签
原文地址:https://www.cnblogs.com/lidandanaa/p/11900566.html
- mac OS X Yosemite 上编译hadoop 2.6.0/2.7.0及TEZ 0.5.2/0.7.0 注意事项
- EasyStack郭长波连任OpenStack基金会独立董事
- VMware Fusion 中如何复制centos/linux虚拟机
- 浅谈国外航空发动机大数据应用
- asp.net mvc SelectList 的selected 失效及解决方案
- 类极客公园火箭发射“返回顶部”jQuery效果(WordPress代码教程)
- 利用ganymed-ssh2远程执行其它Linux机器上的shell命令
- 浅析软件开发的3个层次
- MSBUILD 命令行编译的时候请注意msbuild文件名称或路经中空格导致出错
- Python可以用来做什么?
- 使用View Model从表现层分离领域模型
- 代码实现WordPress点击进入随机一篇文章的方法
- UE4新手编程之创建空白关卡和添加碰撞体
- Office Web Apps
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- R语言中固定与随机效应Meta分析 - 效率和置信区间覆盖
- R语言使用 LOWESS技术图分析逻辑回归中的函数形式
- R语言在逻辑回归中求R square R方
- R语言Poisson回归的拟合优度检验
- R语言ROC曲线下的面积-评估逻辑回归中的歧视
- 东芝MCU实现位带操作
- 单向链表的一点儿感悟
- rt-thread的内存管理分析
- R平方/相关性取决于预测变量的方差
- stata具有异方差误差的区间回归
- R语言用于线性回归的稳健方差估计
- 用SAS进行泊松,零膨胀泊松和有限混合Poisson模型分析
- 东芝开发板驱动OLED模块显示LOGO图片
- sas文本挖掘案例:如何使用SAS计算Word Mover的距离
- R语言ggplot2 对Facebook用户数据可视化分析