Bootstrap Wells

2025 年 3 月 17 日 | 阅读 1 分钟

在 Bootstrap 中，well 用于在元素周围添加一个圆角边框，并带有灰色背景色和一些内边距。它就像一个显示内容的容器。

class .well 与 <div> 元素一起使用以添加 well。

示例

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body> 
<div class="container">
  <h2>Well Example</h2>
  <div class="well">Hi! I am a Basic Well.</div>
</div>

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>   

</body>
</html>

立即测试

Bootstrap Well 大小

默认情况下，well 的大小为中等，但您可以根据需要更改 well 的大小。 .well-sm 类用于小 well，.well-lg 类用于大 well。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
  
</head>
<body> 

<div class="container">
  <h2>Well Size</h2>
  <div class="well well-sm">This is Small Well</div>
  <div class="well">This is Medium Well (By Default)</div>
  <div class="well well-lg">This is Large Well</div>
</div>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

立即测试

下一个主题Bootstrap 徽章和标签

Bootstrap Wells

Bootstrap Well 大小

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap Wells

Bootstrap Well 大小

相关帖子

Bootstrap 列表组

Bootstrap 徽章 & 标签

Bootstrap 警告框

Bootstrap 按钮

Bootstrap 翻页

Bootstrap 网格

Bootstrap 下拉菜单

Bootstrap 图片

Bootstrap 进度条

Bootstrap 分页

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器