Bootstrap洼地是什么？

洼地（Well）：样式的效果和大屏幕展播Jumbotron样式类似，不同点是well样式有了边框设置，并且默认高度是自适应文本的高度。

示例代码：

<div class="well">   <p> sorry I have no word to say</p>   <blockquote>this is a 引用内容</blockquote></div>

　　这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。本文将详细介绍Bootstrap洼地

概述

　　洼地(Well)样式的效果和巨幕jumbotron样式类似，不同点是well样式有了边框设置，并且默认高度是自适应文本的高度。把 Well 用在元素上，就能有嵌入（inset）的简单效果

　　Well样式的使用方法非常简单，使用.well类即可

.well {min-height: 20px;padding: 19px;margin-bottom: 20px;background-color: #f5f5f5;border: 1px solid #e3e3e3;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

<div class="well">小火柴的蓝色理想</div>

尺寸

　　well样式提供了不同大小的样式，主要是padding和圆角大小，分别是well-lg和well-sm。使用时，直接和well一起应用在同一个元素上即可

.well-lg {padding: 24px;border-radius: 6px;
}.well-sm {padding: 9px;border-radius: 3px;
}

<div class="well">小火柴的蓝色理想</div>
小火柴的蓝色理想
小火柴的蓝色理想

 

Atas ialah kandungan terperinci Bootstrap洼地是什么？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

bootstrap

sumber：php.cn

Artikel sebelumnya：6种原型文件格式之间的区别 Artikel seterusnya：ios 不支持 iframe 该怎么解决?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• NameValuePair方式传参数实例教程
  1970-01-01 08:00:00
• 使用dom4j解析xml文档实例
  1970-01-01 08:00:00
• Catalog Service - 解析微软微服务架构实例代码
  1970-01-01 08:00:00
• .net Elasticsearch入门实例详解
  1970-01-01 08:00:00
• 详细介绍Spring boot 添加jsp支持配置的实例
  1970-01-01 08:00:00
• JS怎么检测window.open打开的窗口是否关闭？
  1970-01-01 08:00:00
• 分享一个sqlyog连接数据库乱码的问题以及解决方法
  1970-01-01 08:00:00
• 使用Java中可变长参数的实例
  1970-01-01 08:00:00
• 最新的高德地图API WEB开发实例教程
  1970-01-01 08:00:00
• AJAX的优点和缺点
  1970-01-01 08:00:00

Isu terkini

Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...

daripada 2024-04-06 21:58:04

0

1

800

Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...

daripada 2024-04-06 20:22:15

0

1

454

Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...

daripada 2024-04-06 12:53:11

0

1

376

Suis Bootstrap tidak berfungsi dengan betul apabila halaman web diubah saiznya 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...

daripada 2024-04-05 08:45:39

0

1

3443

Paparkan fail PDF AWS dalam mod Bootstrap dalam Laravel Saya telah memuat turun url aws seperti https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std...

daripada 2024-04-04 22:16:18

0

1

1450

Topik-topik yang berkaitan

Lagi>

• Kekunci pintasan siap sedia
• Adakah OnePlus atau Honor lebih baik?
• Bagaimana untuk menyelesaikan masalah muat turun lambat Baidu Netdisk
• pemangkin amd
• Melengkapkan algoritma untuk nombor negatif
• Penggunaan berbeza dalam SQL
• Kelebihan pycharm
• Pengenalan kepada maksud += dalam bahasa C