本文摘自PHP中文网，作者(*-*)浩，侵删。
面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可。
如下面的实例所示：（推荐学习：Bootstrap视频教程）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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>
|
如果想更改其默认面板的大小可以通过设置.panel-body的宽高来实现。
例：
1 2 3 4 5 6 | <style>
.panel-body{
height:400px;
width:400px;
}
</style>
|
更多Bootstrap相关技术文章，请访问Bootstrap教程栏目进行学习！
以上就是bootstrap怎么设置面板大小的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
深入了解bootstrap中的弹出框
bootstrap icon 不显示怎么办
bootstrap-table数据刷新后留在当前页
bootstrap与vue区别
bootstrap的下拉多选框如何使用
bootstrap 怎么设置字体颜色
bootstrap原理是什么
bootstrap有哪些插件
bootstrap有必要学吗
浅谈bootstrap中glyphicons图标的用法
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » bootstrap怎么设置面板大小
