全面解析Bootstrap布局组件应用

Bootstrap 2019-01-01

本文示例介绍了Bootstrap布局组件应用，分享给大家供大家参考，具体内容如下

字体图标的应用示例

rush:js;">

下拉菜单示例

rush:js;">

按钮工具栏与按钮组

rush:xhtml;">

按钮下拉菜单

rush:xhtml;">

表单中的输入框组

rush:xhtml;">

Box">

导航（tab标签页）

rush:xhtml;">

标签式的导航菜单

基本的胶囊式导航菜单

垂直的胶囊式导航菜单

导航栏

rush:js;">

响应式的导航栏

以下金黄色部分为对一般的导航栏的区别

面包屑导航

    • 分页和翻页

    标签

    rush:xhtml;"> 默认标签 标签 标签 标签 标签 标签

    徽章

    徽章比标签更圆滑，主要用于突出显示新的或未读的项

    rush:xhtml;">

    超大屏幕

    rush:js;">
    欢迎登陆页面！

    这是一个超大屏幕（Jumbotron）的实例。

    页面标题示例

    页面标题实例 子标题

    缩略图

    缩略图标签

    一些示例文本。一些示例文本。

    警告
    dismissable"> 警告！请不要提交。
    dismissable"> 错误！请进行一些更改。

    进度条

    rush:js;">
    Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
    Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
    Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
    Now="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">

    媒体标签

    .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。 .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

    rush:xhtml;">

    列表组

    面板

    rush:xhtml;">
    heading">

    标题

    内容
    产品
      注册
    • 数量
    • 支持

    well效果

    Well 是一种会引起内容凹陷显示或插图效果的容器

    rush:xhtml;">

    如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：

    以上就是本文的全部内容，希望对大家的学习有所帮助。

    布局组件

    相关文章

    Bootstrip HTML 查询搜索常用格式模版
    Bootstrip HTML 查询搜索常用格式模版 <form class=&...
    如何在按钮上加红色数字
    如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
    让两个按钮左右排列
    要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...
    status能否设置为布尔值类型，前端采用复选框形式
    是的，可以将status设置为布尔类型，这样可以在前端使用复选...
    Bootstrap 按钮总结
    前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...
    Python学习-day52-bootstrap
    起步导入：<linkrel="stylesheet"href="b...
    价格