与Bootstrap标签相关的技术文章 - 时代Java，与您同行！

时代Java，与您同行！关注微信公众号，关注前沿技术，微信搜索：nowjava或时代Java，也可点击这里扫码关注

时代Java

登录注册

与 “Bootstrap” 标签相关内容。

过渡效果

关于过渡效果对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译（或压缩）版的 bootstrap.js 文件，就无需再单独将其引入了。包含的内容Transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

过渡效果， bootstrap，中文版
概览

单个还是全部引入JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

概览， bootstrap，中文版
Well

默认效果把 Well 用在元素上，能有嵌入（inset）的的简单效果。<div class="well">...</div>可选类/样式通过这两种可选修饰类，可以控制此组件的内补（padding）和圆角的设置。<div class="well well-lg">...</div>

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

well， bootstrap，中文版
列表组

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。基本实例最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

列表， bootstrap，中文版
进度条

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。跨浏览器兼容性进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。基本实例默认样式的进度条<div class="progress"> <

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

进度条， bootstrap，中文版
警告框

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。实例将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的 4 个类（例如，.alert-success），代表不同的警告信息。没有默认类警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

警告， bootstrap，中文版
缩略图

通过缩略图组件扩展 Bootstrap 的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件，比如 Masonry、Isotope 或 Salvattore。默认样式的实例Boostrap 缩略图的默认设计仅需最少的标签就能展示带链接的图片。<div class="row"> <

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

缩略图， bootstrap，中文版
徽章

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。<a href="#">Inbox <span class="badge">42</span></a><button class="btn btn-primary" type="button"> Messages <span class="badge">4</span></button>

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

徽章， bootstrap，中文版
标签

实例<h3>Example heading <span class="label label-default">New</span></h3>可用的变体用下面的任何一个类即可改变标签的外观。<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

标签， bootstrap，中文版
分页

为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。默认分页受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，有点事容易点击、易缩放、点击区域大。<nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

分页， bootstrap，中文版
导航条

默认样式的导航条导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。两端对齐的导航条导航链接已经被弃用了。

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

导航条， bootstrap，中文版
导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。在标签页上使用导航需要依赖 JavaScript 标签页插件由于标签页需要控制内容区的展示，因此，你必须使用标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性 – 详细信息请参考该插件的实例。确保导航组件的可访问性如果你在使用导航组件实现导航条功能，务必在 <

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

导航， bootstrap，中文版
输入框组

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。只支持文本输入框 <input>这里请避免使用 <select> 元素，因为 WebKit 浏览器不能完全绘制它的样式。避免使用 <textarea>

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

输入框， bootstrap，中文版
按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。按钮组中的工具提示和弹出框需要特别的设置当为 .btn-group 中的元素应用工具提示或弹出框时，必须指定 container: 'body' 选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

按钮， bootstrap，中文版
下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。实例将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。<div class="dropdown"> <

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

下拉菜单， bootstrap，中文版
辅助类

情境文本颜色通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。<p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...<

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

辅助， bootstrap，中文版
图片

响应式图片在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。请参考助手类章节了解更多关于 .

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

图片， bootstrap，中文版
按钮

可作为按钮使用的标签或元素为 <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-default" type="button" value="Input">

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

按钮， bootstrap，中文版
表单

基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。<form> <div class="form-group"> <label for="exampleInputEmail1">Email address<

Xebcnor 2020-08-04 05:37:59 2020-08-04 05:37:59

表单， bootstrap，中文版
Bootstrap 标签页（Tab）插件

标签页（Tab）在 Bootstrap 导航元素一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

Xebcnor 2020-09-24 03:02:27 2020-09-24 03:02:27

Bootstrap，标签页， Tab，插件

过渡效果

概览

Well

列表组

进度条

警告框

缩略图

徽章

标签

分页

导航条

导航

输入框组

按钮组

下拉菜单

辅助类

图片

按钮

表单

Bootstrap 标签页（Tab）插件

热门标签

社区

关于