![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Bootstrap
xiaochouyu0703
这个作者很懒,什么都没留下…
展开
-
前段开发框架介绍--Bootstrap
Bootstrap是简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。目前基于Bootstrap构建的网站也有很多优秀的例子。所有的JavaScript插件都依赖jQuery库。 Bootstrap中的HTML、CSS和JS适用于各类设备, 不过它们可以被概括成几个类别,请看[url]http://v2.bootcss.com/index.html[/url]顶部的导航条。 文档章...原创 2015-02-03 16:48:27 · 129 阅读 · 0 评论 -
Bootstrap v3--图标
图标可以应用到按钮、工具条中的按钮组、导航或输入框等地方。注意: 1.为了设置正确的内补padding,要在图标和文本间添加一个空格 2.不能和其他组件联合使用,不能在同一个元素上与其他类同在。 3.只对内容为空的元素起作用,元素应不包含任何文本或者子元素。 aria-hidden="true" 属性:避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容 aria-label属性:表...原创 2015-03-14 11:34:46 · 252 阅读 · 0 评论 -
Bootstrap--JS插件模态对话框
[url]http://v2.bootcss.com/javascript.html#modals[/url] [b]方法[/b] .modal(options) 让你指定的内容变成一个模态对话框。接受一个可选的参数object. [code="java"]$('#myModal').modal({keyboard: false})[/code] .modal('toggle') 手动...原创 2015-03-13 17:18:52 · 158 阅读 · 0 评论 -
Bootstrap--栅格系统
Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器。 如加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。 查看bootstrap.css可知.row类的样式为: [code="css"].row { margin-left: -20px; *...原创 2015-03-10 14:09:37 · 126 阅读 · 0 评论 -
Bootstrap--布局
[code="html"] [/code] 提供了一个通用的固定宽度(也可以变为响应式)的布局方式。 [code="html"][/code] 100%宽度,占据全部视口的容器的布局方式。可以创建一个流式、两列的页面 [code="html"] [/code]...原创 2015-03-09 15:58:04 · 70 阅读 · 0 评论 -
Bootstrap组件--标签和徽章
[size=large][b]标签:[/b][/size] 默认样式Default 成功 Success 警告 Warning 重要 Important 信息 Info 反色 Inverse [img]http://dl2.iteye.com/upload/attachment/0106/4975/7a1361fb-1dee-3532-af7f-fd3d202b9d2c.png[/i...原创 2015-03-09 15:10:10 · 257 阅读 · 0 评论 -
Bootstrap--分页
[b]标准分页[/b] 优点:容易扩展,具有非常大的点击区域。非常适合app和搜索结果的展示。 li添加disabled类:标明链接不可点击 li添加active类:标明当前页 div添加pagination-large、pagination-small或pagination-mini类:可以改变分页尺寸 div添加pagination-centere...原创 2015-02-27 16:57:34 · 83 阅读 · 0 评论 -
Bootstrap组件--标签页导航
[code="html"] Section 1 Section 2 I'm in Section 1. Howdy, I'm in Section 2. [/code] [img]http://dl2.iteye.com/upload/attachmen...原创 2015-02-05 14:48:17 · 185 阅读 · 0 评论 -
Bootstrap组件--警告框
[code="html"] × Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget la...原创 2015-02-05 11:53:30 · 142 阅读 · 0 评论 -
Bootstrap组件--面包屑
[b]面包屑导航(BreadcrumbNavigation)[/b] 这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。所以,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。 适用范围: 1、层级较深的网站。面包屑导航适合层级较深的网站,如果只有一级分类的话,通...原创 2015-02-04 17:46:45 · 273 阅读 · 0 评论 -
Bootstrap--按钮组
[url]http://v2.bootcss.com/components.html#buttonGroups[/url] [code="html"] 1 2 3 4 ...原创 2015-02-04 17:25:32 · 65 阅读 · 0 评论 -
Bootstrap--表格
支持标签、标签、 标签、标签、标签、标签、标签。 [code="html"] # First Name Last Name Username ...原创 2015-02-04 15:32:43 · 78 阅读 · 0 评论 -
Bootstrap--图标
Bootstrap中的图标的封装是由Glyphicons提供的140个图标,包含深灰色(默认)和白色两种颜色。 [url]http://v2.bootcss.com/base-css.html#icons[/url] bootstrap\bootstrap\img中有两张jpg,查看源码得知正好使用了css sprits 定位不同的小图标。 [img]http://dl2.iteye...原创 2015-02-04 10:59:04 · 155 阅读 · 0 评论 -
Bootstrap--图片
Bootstrap中的图片样式是通过css3的border-radius [url]http://wangjingyi.iteye.com/blog/2169790[/url] 进行封装,可以轻松的添加三个类给图片设置样式: 查看源码是这样的: [code="css"].img-rounded { -webkit-border-radius: 6px; -moz-borde...原创 2015-02-03 18:09:58 · 68 阅读 · 0 评论 -
Bootstrap基本css样式--按钮
[url]http://v2.bootcss.com/base-css.html#buttons[/url] 首先介绍下默认按钮: 任何赋予.btn类的页面元素都会显示按钮样式。不过,通常是用于更好的表现 和 页面元素。[url]http://v2.bootcss.com/base-css.html#buttons[/url] [img]http://dl2.iteye.com/upl...原创 2015-02-03 17:12:22 · 261 阅读 · 0 评论 -
Bootstrap插件--图片轮播
[url]http://www.bootcss.com/p/unslider/[/url] 1.首先引入jQuery和Unslider的脚本: [code="js"] [/code] 2.准备HTML代码创建如下布局: [code="html"] This is a slide. This is another slid...原创 2015-03-25 11:05:20 · 122 阅读 · 0 评论