Bootstrap <基础三十>Well

最新推荐文章于 2024-07-28 20:27:10 发布
最新推荐文章于 2024-07-28 20:27:10 发布
阅读量80 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lansy/p/4499380.html
版权

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的 Well</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="well">您好，我在 Well 中！</div>

</body>
</html>

结果如下所示：

默认的 Well

尺寸大小

您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - Well 的尺寸大小</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>

</body>
</html>

结果如下所示：

Well 的尺寸大小
 
Bootstrap<基础二十> 标签
Bootstrap <基础二十一>徽章（Badges）
Bootstrap <基础二十二>超大屏幕（Jumbotron）
Bootstrap <基础二十三>页面标题（Page Header）
Bootstrap<基础二十四> 缩略图
Bootstrap <基础二十五>警告（Alerts）
Bootstrap <基础二十六>进度条
Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap <基础二十八>列表组
Bootstrap <基础二十九>面板（Panels）
Bootstrap <基础三十>Well
Bootstrap <基础三十一>插件概览
Bootstrap <基础三十二>模态框（Modal）插件

转载于:https://www.cnblogs.com/lansy/p/4499380.html

anpochi7793
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap树形控件使用方法详解
09-02
<div class="tree well"> <ul> <li> <span><i class="icon-folder-open"></i> 顶级节点1</span> <!-- 子节点 --> </li> <!-- 其他节点 --> </ul> </div> ``` 在上述结构中，`<li>`元素代表树形结构中的节点...
整理关于Bootstrap警示框的慕课笔记
08-30
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. </div> ``` 总的来说，Bootstrap警示框是一个强大的工具，可以帮助开发者创建直观、易于...
Bootstrap<基础十三> 按钮组
04-10 105
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。你可以通过Bootstrap 按钮（Button） 插件添加可选的 JavaScript 单选框和复选框样式行为。 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class： Class描述代码示例 .btn-group 该 class 用于形成基本的按钮组。...
Bootstrap <基础十九>分页
04-21 113
Bootstrap 支持的分页特性。分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。 分页（Pagination） 下表列出了 Bootstrap 提供的处理分页的 class。 Class描述示例代码 .pagination 添加该 class 来在页面上显示分页。 <ul class="paginat...
Bootstrap<基础十五> 输入框组
04-15 162
Bootstrap 支持的另一个特性，输入框组。输入框组扩展自表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。 向.form-control添加前缀或后缀元素的步骤...
Bootstrap<基础十四> 按钮下拉菜单
04-14 77
使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个.btn-group中放置按钮和下拉菜单即可。也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。 下面的实例演示了一个基本的简单的按钮下拉菜单： <!DOCTYPE html> <html&...
Bootstrap<基础二十> 标签
04-22 98
Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class.label来显示标签，如下面的实例所示： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签</title> <link href="/bootst...
Bootstrap<基础三> 排版
03-15 119
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例： <!DOCTYPE html&...
Bootstrap <基础二十六>进度条
05-05 137
Bootstrap 进度条。在本教程中，你将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。 Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。 默认的进度条 创建一个基本的进度条的步骤如下： 添加一个带有 c...
Bootstrap <基础三十一>插件概览
05-15 124
在前面布局组件中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使不是一名高级的 JavaScript 开发人员，也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况被触发。 ...
Bootstrap<基础六> 表单
03-18 112
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 <form> 元素添加...
bootstrap3
12-03
4. **样式**：Bootstrap3 包含了一套完整的CSS样式，用于字体、颜色、间距等基本元素的控制，以及预定义的类，如`.well`（内阴影效果）、`.alert`（警告提示）和`.badge`（徽章）等，使得页面元素设计更加一致和专业...
Bootstrap4官方模板Hyper - Responsive Bootstrap 4 Admin Dashboard v1.5.0.zip
08-07
**Bootstrap 4基础知识** Bootstrap 4是Bootstrap框架的最新版本，它引入了许多新特性，改进了代码结构，并对原有的CSS、JS和HTML元素进行了优化。主要特点包括： 1. **Flexbox布局模式**：Bootstrap 4采用了Flexbox...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1189
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 1044
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 212
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 173
【代码】vue el-select的下拉树形结构。
新手vue学习问题汇总（自用）（长期更新）
最新发布
lapiii的博客
07-28 253
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
<EventStruct> <EventCode>0 BOOTSTRAP</EventCode> <CommandKey></CommandKey> </EventStruct> <EventStruct> <EventCode>1 BOOT</EventCode> <CommandKey></CommandKey> </EventStruct> </Event>
06-03
消息中包含了两个事件：0 BOOTSTRAP 和 1 BOOT。其中，0 BOOTSTRAP 事件表示设备刚刚启动，并且正在初始化连接。1 BOOT 事件表示设备启动完成，可以开始正常工作了。事件通知可以帮助管理服务器及时了解设备的状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值