全面解析Bootstrap布局组件应用

全面解析Bootstrap布局组件应用

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

字体图标的应用示例

下拉菜单示例

data-toggle="dropdown">

主题

data-toggle="dropdown">

主题

选项1

选项2

选项3

分离的链接

按钮工具栏与按钮组

Button 1

Button 2

Button 3

Button 4

http://Button 5

Button 6

Button 7

Button 8

Button 9

按钮下拉菜单

data-toggle="dropdown">

默认

data-toggle="dropdown">

默认

表单中的输入框组

.00

http://

Go!

导航（tab标签页）

标签式的导航菜单

基本的胶囊式导航菜单

垂直的胶囊式导航菜单

导航栏

W3Cschool

java

提交

导航栏按钮

<p >导航栏文本 我是链接

响应式的导航栏

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

data-target="#example-navbar-collapse">

data-target="#example-navbar-collapse">

W3Cschool

面包屑导航

分页和翻页

标签

默认标签

主要标签

成功标签

信息标签

警告标签

危险标签

徽章

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

42

首页

3

消息

超大屏幕

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

学习更多

页面标题示例

子标题

缩略图

alt="通用的占位符缩略图">

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

按钮

按钮

警告

aria-hidden="true">

×

aria-hidden="true">

×

成功！很好地完成了提交。

aria-hidden="true">

×

aria-hidden="true">

×

成功！很好地完成了提交。

aria-hidden="true">

×

aria-hidden="true">

×

警告！请不要提交。

aria-hidden="true">

×

aria-hidden="true">

×

错误！请进行一些更改。

进度条

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

style="width: 90%;">

90% 完成（成功）

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

style="width: 40%;">

40% 完成

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

style="width: 30%;">

30% 完成（信息）

aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"

style="width: 20%;">

20% 完成（警告）

媒体标签

.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

alt="通用的占位符图像">

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

alt="通用的占位符图像">

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

alt="通用的占位符图像">

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

alt="通用的占位符图像">

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

alt="通用的占位符图像">

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

这是一些示例文本。这是一些示例文本。

列表组

新

24*7 支持

新

折扣优惠

入门网站包

免费域名注册

您将通过网页进行免费域名注册。

24*7 支持

我们提供 24*7 支持。

面板

带有 title 的面板标题

面板内容

well效果

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

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

Bootstrap实战教程

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。