Home > Article > Web Front-end > How to set the panel size in bootstrap
How to set the panel size in bootstrap
- (*-*)浩Original
- 2019-07-19 11:41:086099browse
Panels. The Panel component is used to insert DOM components into a box. To create a basic panel, just add class .panel and class .panel-default to the
element.
As shown in the following example: (Recommended learning: Bootstrap video tutorial)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 默认的面板</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="panel panel-default"> <div class="panel-body"> 这是一个基本的面板 </div> </div> </body> </html>
If If you want to change the size of its default panel, you can do so by setting the width and height of .panel-body.
Example:
<style>
.panel-body{
height:400px;
width:400px;
}
</style>
For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!
The above is the detailed content of How to set the panel size in bootstrap. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to set the background image to be adaptive in bootstrapNext article：How to set the background image to be adaptive in bootstrap