登录注册

  • 标签页

    之前通过组件只是简单的学习过这样的。<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li></ul>当然效果就是这样，只是默认的激活了第一个标签 Home，然后不能点击。

    Xebcnor
    标签页， bootstrap， 中文版

  • 下拉菜单

    调用方式通过 data 属性在链接或按钮上添加 data-toggle="dropdown" 即可切换下拉菜单。<div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div>

    Xebcnor
    下拉菜单， bootstrap， 中文版

  • 模态框

    模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。不支持同时打开多个模态框千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

    Xebcnor
    模态， bootstrap， 中文版

  • 过渡效果

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

    Xebcnor
    过渡效果， bootstrap， 中文版

  • 概览

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

    Xebcnor
    概览， bootstrap， 中文版

  • Well

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

    Xebcnor
    well， bootstrap， 中文版

  • 列表组

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

    Xebcnor
    列表， bootstrap， 中文版

  • 进度条

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

    Xebcnor
    进度条， bootstrap， 中文版

  • 警告框

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

    Xebcnor
    警告， bootstrap， 中文版

  • 缩略图

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

    Xebcnor
    缩略图， 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
    徽章， 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
    标签， bootstrap， 中文版

  • 分页

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

    Xebcnor
    分页， bootstrap， 中文版

  • 导航条

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

    Xebcnor
    导航条， bootstrap， 中文版

  • 导航

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

    Xebcnor
    导航， bootstrap， 中文版

  • 输入框组

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

    Xebcnor
    输入框， bootstrap， 中文版

  • 按钮组

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

    Xebcnor
    按钮， bootstrap， 中文版

  • 下拉菜单

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

    Xebcnor
    下拉菜单， 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
    辅助， bootstrap， 中文版

  • 图片

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

    Xebcnor
    图片， bootstrap， 中文版
上一页 下一页

热门标签

关注时代Java

Copyright © 2014-2024NowJava. All Rights Reserved. 时代Java 版权所有 京ICP备14059627号-7

关注时代Java