Bootstrap之带标题的面板

最新推荐文章于 2024-08-23 10:43:58 发布
最新推荐文章于 2024-08-23 10:43:58 发布
阅读量2.8k 收藏 1
点赞数
分类专栏： bootstrap 文章标签： bootstrap class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33733970/article/details/78116234
版权

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">基本信息</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group has-error">
                        <label for="inputName" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="inputName" placeholder="姓名" aria-describedby="nameHelp">
                            <span id="nameHelp" class="help-block">输入姓名有误</span>
                        </div>
                    </div>
                    <div class="form-group has-error">
                        <label for="inputTel" class="col-sm-2 control-label">手机</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="inputTel" placeholder="手机" aria-describedby="telHelp">
                            <span id="telHelp" class="help-block">输入手机号有误</span>
                        </div>
                    </div>
                    <div class="form-group has-error">
                        <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-4">
                            <input type="email" class="form-control" id="inputEmail" placeholder="邮箱" aria-describedby="emailHelp">
                            <span id="emailHelp" class="help-block">输入手机号有误</span>
                        </div>
                    </div>
                    <div class="form-group has-error">
                        <label for="inputPassword" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="inputPassword" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group has-error">
                        <label for="inputFile" class="col-sm-2 control-label">头像</label>
                        <div class="col-sm-4">
                            <input type="file" id="inputFile">
                            <p class="help-block">只支持jpg、png、gif格式。</p>
                        </div>

                    </div>
                    <hr>
                    <div class="form-group">
                        <label for="inputFile" class="col-sm-2 control-label">属性</label>
                        <div class="col-sm-4">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                           checked>
                                   我是一个好人
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                    我是一个好人
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                                    我是一个好人
                                </label>
                            </div>

                        </div>

                    </div>
                </form>


            </div>
        </div>
    </div>
    <div class="row">
        <button type="button" class="btn btn-success pull-right">下一步</button>
    </div>
</div>

</body>
</html>

效果图

效果图

前端领域：Bootstrap的折叠面板样式
前端视界的博客
04-22 670
本文旨在为前端开发者提供关于Bootstrap折叠面板组件的全面指南。折叠面板的基本工作原理标准实现方式和最佳实践响应式设计考虑因素自定义样式和行为的技巧性能优化和可访问性建议背景介绍：提供折叠面板的基本概念和使用场景核心概念与联系：解析折叠面板的架构和交互流程实现原理与操作步骤：详细说明创建折叠面板的具体方法实际应用案例：展示不同场景下的实现示例高级定制技巧：探讨样式覆盖和功能扩展最佳实践与常见问题：总结使用经验和解决方案资源推荐：提供进一步学习的参考资料。
Bootstrap 面板
最新发布
csbysj2020的博客
10-28 356
Bootstrap 面板是一种容器，用于将相关内容组织在一起。它们通常包含标题、内容和可选的脚注。面板可以是默认样式，也可以是带有颜色和边框的样式。通过使用 Bootstrap 的预定义类，可以轻松地定制面板的外观和感觉。通过自定义 CSS，可以进一步定制面板的样式，以满足特定的设计需求。
Bootstrap的面板展示
实践求真知
02-04 1096
一 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;面板&lt;/title&gt; &lt;link rel=
小黑小波比.bootstrap带标题面板
u010489586的专栏
09-02 960
如下效果： 如下代码：
Bootstrap历练实例：面板的标题
adiking520110的博客
11-27 123
面板标题 我们可以通过以下两种方式来添加面板标题： 使用.panel-headingclass 可以很简单地向面板添加标题容器。to easily add a heading container to your panel. 使用带有.panel-titleclass 的 <h1>-<h6> 来添加预定义样式的标题。 下面的实例演示了这两种...
Bootstrap的标题类(标题样式h1~h6、small标签、display类)
昊虹AI笔记
09-05 1350
使用Bootstrap的标题类(标题样式h1~h6)
基于 Angular 和 Bootstrap 的后台管理面板框架
05-14
【标题】"基于 Angular 和 Bootstrap 的后台管理面板框架"是一个高度可定制且功能丰富的Web应用程序开发框架，专门设计用于构建高效、响应式的后台管理系统。它结合了Angular的动态性和复杂应用处理能力，以及...
浅析Bootstrap组件之面板组件
09-02
Bootstrap还提供了带有头部和尾部的面板，以增强功能和视觉表现。`.panel-heading`类用于创建面板头部，通常包含标题，而`.panel-footer`类则用于创建底部区域，可以用于展示补充信息或操作按钮。这两个类都针对间距...
构建在 BootStrap 4 之上的 HTML 控制面板框架
05-14
标题中的“构建在 BootStrap 4 之上的 HTML 控制面板框架”指的是一个基于Bootstrap 4框架设计的，用于创建管理界面或控制面板的HTML模板。Bootstrap是世界上最流行的前端开发框架之一，它提供了一套完整的响应式...
Bootstrap面板学习使用
08-31
例如，在`.panel-body`内部嵌套一个表格或列表组，可以创建一个带有分组内容的面板。 在代码中，`<script>`标签引入了jQuery和Bootstrap的JavaScript库。虽然在这个简单的面板示例中，JavaScript并非必需，但在实际...
Bootstrap面板
遇见更好的自己
06-13 696
1.面板组件用于把DOM组件插入到一个盒子中，创建一个基本面板，只需要添加.panel和panel-default两个类既可。//基本的面板 <div class="panel panel-default"> <div class="panel-body">基本的面板</div> </div>2.面板标题 使用.panel-heading可以很简单的向面板添加标题容器。使用.panel-t
Bootstrap 面板（Panels）
2402_83140078的博客
08-23 546
本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 元素添加 class和 class。
Bootstrap面板（Panels）
暖心~的博客
03-07 1268
面板基本结构：<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> 带有 title 的面板标题 </h3> </div> <div class="panel-body"> 面板内容
Bootstrap-标题
lhh_12345的博客
11-14 1298
一、bootstrap和html的写法一样，定义标题都是通过标签的方式，但是bootstrap对样式进行了重置，并且添加了.h1~.h6的类名让不是标题的元素也能应用其样式；       具体规则如下：    可得：1、h1~h3的margin-top和margin-bottom分别为20px和10px；               2、所有标题的行高为1.1，文本的颜色和字体都继承父元
3.19 Bootstrap 面板(Panels)
梁辰兴的博客
07-22 481
为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 中即可。元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组。注意：面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。
Bootstrap<标题>
Andy_java_的博客
11-09 627
标题（一） Bootstrap和普通的HTML页面一样，定义标题都是使用标签到,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示： 通过比较可以发现，Bootstrap标题样式进行了以下显著的优化重置： 1、重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20p
Bootstrap可视化拖动面板布局系统使用教程
- 在Bootstrap可视化编辑拖动面板布局系统中，设计者可以方便地拖动各个组件块，比如标题栏、导航栏、内容区域、侧边栏和页脚等，来进行快速布局调整。 3. **栅格化排列布局** - 栅格化布局是响应式网页设计中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值