Bootstrap
文章平均质量分 74
boonyaxnn
好好学习,天天向上
展开
-
Bootstrap 标签页(Tab)插件
您可以通过以下两种方式启用标签页:1、通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中添加 nav 和 nav-tabs 类到ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 Bootstrap胶囊式样式。 Home原创 2017-03-20 17:04:27 · 2229 阅读 · 0 评论 -
Bootstrap 下拉菜单(Dropdowns)
Bootstrap-下拉菜单标题 body { padding-top: 150px; padding-bottom: 40px; font-family: '宋体'; } <button type="button" class="btn原创 2017-03-14 16:53:06 · 500 阅读 · 0 评论 -
Bootstrap 标签式导航
Home SVN iOS VB.Net Java PHP 效果图原创 2017-03-14 18:00:43 · 345 阅读 · 0 评论 -
Bootstrap-激活导航状态
Bootstrap-激活导航状态 body { padding-top: 150px; padding-bottom: 40px; font-family: '楷体'; font-size: 24px; } span.badge { font-size: 18px; } 胶囊式导航中的激活原创 2017-03-14 19:36:53 · 1328 阅读 · 0 评论 -
Bootstrap-超大屏幕(Jumbotron)
Bootstrap-超大屏幕(Jumbotron) 欢迎登陆页面! 这是一个超大屏幕的实例。 学习更多 效果图原创 2017-03-15 18:27:04 · 475 阅读 · 0 评论 -
Bootstrap 页面标题(Page Header)
Bootstrap 页面标题(Page Header) 页面标题 子标题 Bootstrap 页面标题(Page Header.Bootstrap 页面标题(Page Header).Bootstrap 页面标题(Page Header).Bootstrap 页面标题(Page Header). 如需使用页面标题(Page He原创 2017-03-15 18:36:22 · 3535 阅读 · 0 评论 -
Bootstrap 缩略图
Bootstrap 创建缩略图的步骤如下:1、在图像周围添加带有 class .thumbnail 的 标签.2、这会添加四个像素的内边距(padding)和一个灰色的边框。有了一个基本的缩略图,我们可以向缩略图添加各种 HTML 内容,比如标题、段落或按钮。具体步骤如下:1、把带有 class .thumbnail 的 标签改为 。2、在该 内,您可以添加任何您想原创 2017-03-15 19:04:57 · 265 阅读 · 0 评论 -
Bootstrap 警告(Alerts)
Bootstrap 所提供的用于警告的 class,可以通过创建一个 ,并向其添加一个.alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。html代码 成功!很好地完成了提交。原创 2017-03-15 19:24:49 · 667 阅读 · 0 评论 -
Bootstrap 进度条
一、创建一个基本的进度条的步骤如下:1、添加一个带有 class .progress 的 。2、接着,在上面的 内,添加一个带有 class .progress-bar 的空的 。3、添加一个带有百分比表示的宽度的 style 属性,例如 style="60%"; 表示进度条在 60% 的位置。html代码 效果图原创 2017-03-15 20:15:52 · 779 阅读 · 0 评论 -
Bootstrap 进度条代码
Bootstrap 页面标题(Page Header) div.progress{ margin: 30px 0px 30px 0px; } 已完成60%!原创 2017-03-15 20:17:51 · 386 阅读 · 0 评论 -
Bootstrap 多媒体对象(Media Object)
Bootstrap 中的多媒体对象(Media Object),可以在组件中使用图文混排,图像可以左对齐(class="pull-left")或者右对齐(class="pull-right")。可以在 HTML 标签中添加以下两种形式来设置媒体对象:1、media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。2、media-list:如果你需要原创 2017-03-16 15:40:46 · 594 阅读 · 0 评论 -
Bootstrap 列表组
一、创建一个基本的列表组的步骤如下:1、向元素 添加 class .list-group。2、向 添加 class .list-group-item。只需要在 元素中添加 ,我们就可以向任意的列表项添加徽章组件,它会自动定位到右边。html代码 唐代诗人李白 唐代诗人李白 唐代诗人李白 唐代诗人李白原创 2017-03-16 16:27:18 · 658 阅读 · 0 评论 -
Bootstrap 面板(Panels)
一、基本的面板,html代码 Bootstrap list-group body{ margin-top:30px; font-family: '楷体'; } p{ font-size: 18px; }原创 2017-03-16 17:09:23 · 408 阅读 · 0 评论 -
Bootstrap Well
我在大well中! 效果图原创 2017-03-16 17:15:35 · 434 阅读 · 0 评论 -
Bootstrap 过渡效果Transition-模态框(Modal)
可以切换模态框(Modal)插件的隐藏内容:1、通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性 data-toggle="modal",同时设置data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")2、通过 JavaScript:使用这种技术,您可以通过简单的原创 2017-03-16 18:16:57 · 2783 阅读 · 0 评论 -
Bootstrap 按钮组大小,嵌套,垂直的使用
1、按钮的大小class .btn-group-* 的使用,代码 按钮 1 按钮 2 按钮 3 按钮 4 按钮 5 按钮 6 2、在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group,代码 按钮 7 按钮 8 按钮9原创 2017-03-14 17:29:48 · 2154 阅读 · 0 评论 -
Bootstrap 字体图标(Glyphicons)
部分图标列表html代码 body { padding-top: 150px; padding-bottom: 40px; background-color: #E3ED83; font-family: '楷体'; } h1{ color: #0F0305;原创 2017-03-14 16:13:21 · 764 阅读 · 0 评论 -
Bootstrap 响应式实用工具
响应式实用工具目前只适用于块和表切换:从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:打印类,使用这些切换打印内容:原创 2017-03-14 15:34:28 · 537 阅读 · 0 评论 -
Bootstrap 警告框(Alert)插件
有以下两种方式启用警告框的可取消(dismissal)功能:1、通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能。×2、通过 JavaScript添加可取消功能:$(".alert").alert()html代码 √原创 2017-03-20 18:24:57 · 5496 阅读 · 0 评论 -
Bootstrap data类型的Url格式--url(data:image/gif;base64,AAAA):把小数据直接嵌入到Url中
原文链接http://shiyun1013.blog.163.com/blog/static/1077403620111113234714/所谓"data"类型的Url格式,是在RFC2397中提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个点,也是要从另外一个外部的图片文件例如gif文件中读转载 2017-03-21 14:32:37 · 25493 阅读 · 0 评论 -
Bootstrap 轮播(Carousel)插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。如果您想要单独引用该插件的功能,那么您需要引用carousel.js,或者bootstrap.js 或压缩版的 bootstrap.min.js。 Bootstrap 轮播(Carousel)插件原创 2017-03-21 14:45:40 · 629 阅读 · 0 评论 -
Bootstrap 滚动监听(Scrollspy)插件
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js。或者可以引用 bootstrap.js 或压缩版的bootstrap.min.js。创建水平滚动监听,html代码原创 2017-03-21 15:48:55 · 1218 阅读 · 0 评论 -
Bootstrap 提示工具(Tooltip)插件
一、提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。有以下两种方式添加提示工具(tooltip):1、通过data属性:如需添加一个提示工具(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下,插件把提示工具(too原创 2017-03-21 16:38:56 · 7127 阅读 · 0 评论 -
Bootstrap 弹出框(Popover)插件
一、弹出框(Popover)与工具提示(Tooltip)类似。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。有以下两种用法:1、通过data属性:添加一个弹出框(popover),只需向一个锚/按钮标签添加 data-toggle="popover"原创 2017-03-21 17:22:52 · 690 阅读 · 0 评论 -
Bootstrap 折叠(Collapse)插件
1、使用折叠(Collapse)插件可以创建可折叠的分组或面板accordion: Bootstrap 折叠(Collapse)插件 点我展开,再点我折叠。Bootstrap组件 Bootstrap中包含了丰富的Web组件,根据这些组件原创 2017-03-21 18:02:00 · 2449 阅读 · 0 评论 -
Bootstrap UI 编辑器
1、Bootstrap Magic2、BootSwatchr3、Bootstrap Live Editor4、Fancyboot5、Style Bootstrap6、Lavish7、Bootstrap ThemeRoller8、LayoutIt9、Pingendo10、Kickstrap11、Bootply12、X-Editable13、Jetstr原创 2017-03-22 17:56:08 · 507 阅读 · 0 评论 -
Bootstrap 网格系统
1、关于Bootstrap 网格系统,Bootstrap 官方文档中有关网格系统的描述: Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的定义类,也包含了用于生成更多语义布局的功能强大的混合类。(Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代原创 2017-03-13 16:19:32 · 316 阅读 · 0 评论 -
Bootstrap 初学 实例
hrml代码 Bootstrap 初学 .jumbotron{ text-align: center; background: #1FC952;} 我的第一个 Bootstrap 页面 重置窗口大小,查看响应式效果! 第一列 Bootstrap CSS原创 2017-03-13 15:20:31 · 795 阅读 · 0 评论 -
Bootstrap 表格制作
Bootstrap 支持的一些表格元素:可用于表格中的tablede 样式可用于表格中的, 和 html与css代码 div{ font-family: '宋体'; color: #0A0A0A; } tr,td{ width:30px; height: 50px;原创 2017-03-13 18:15:31 · 1721 阅读 · 0 评论 -
BootStrap 表单
表单布局Bootstrap 提供了下列类型的表单布局:垂直表单(默认)内联表单水平表单小妞妞做的表单实例: Bootstrap 教学意见调查表 body { padding-top: 150px; padding-bottom: 40px; background-color:原创 2017-03-13 21:41:48 · 385 阅读 · 0 评论 -
Bootstrap 按钮
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观按钮大小hrml代码 Bootstrap 实例 - 按钮选项 button{ height: 36px; width: 156px; } 原始按钮 成功按钮 信息按钮原创 2017-03-13 23:28:19 · 470 阅读 · 0 评论 -
Bootstrap 图片
Bootstrap 提供了4个可对图片应用简单样式的 class,请看html代码 Bootstrap-图片 h1{ color: #0F0305; font-weight:900; text-shadow:1px 1px 0px #AD55C9; } p{ color: #6A031A; siz原创 2017-03-14 13:29:47 · 618 阅读 · 0 评论