Bootstrap学习笔记 16 - Panels

最新推荐文章于 2023-07-11 12:15:00 发布
最新推荐文章于 2023-07-11 12:15:00 发布
阅读量521 收藏
点赞数 1
分类专栏： Bootstrap 文章标签： bootstrap panels 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011304970/article/details/78671928
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
        <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <title>Panels</title>
        <script>
            function showHTMLContent(showElement, codeElement) {
                $(showElement).html($('<div/>').text($(codeElement).html()).html());
            }
            $(function() {
                showHTMLContent('#showPanel', '#panel');
                showHTMLContent('#showPanelGroup', '#panelGroup');
                $(":checkbox[name='showHeader']").click(function() {
                    if (this.checked) {
                        $("[name='panelHeading']").removeClass("hidden");
                    } else {
                        $("[name='panelHeading']").addClass("hidden");
                    }
                    showHTMLContent('#showPanel', '#panel');
                });
                $(":checkbox[name='showFooter']").click(function() {
                    if (this.checked) {
                        $("[name='panelFooter']").removeClass("hidden");
                    } else {
                        $("[name='panelFooter']").addClass("hidden");
                    }
                    showHTMLContent('#showPanel', '#panel');
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1>Panel样式</h1>
            <form role="form">
                <div class="form-group">
                    <input type="checkbox" name="showHeader"> Show Header <br>
                    <input type="checkbox" name="showFooter"> Show Footer
                </div>
            </form>
            <h2>代码</h2>
            <pre id="showPanel"></pre>
            <h2>样式</h2>
            <div id="panel">
                <div class="panel panel-default">
                    <div class="panel-heading hidden" name="panelHeading">Panel Heading</div>
                    <div class="panel-body">Panel Contents</div>
                    <div class="panel-footer hidden" name="panelFooter">Panel Footer</div>
                </div>
            </div>

            <br><br>

            <h1>Panel Group</h1>
            <h2>代码</h2>
            <pre id="showPanelGroup"></pre>
            <h2>样式</h2>
            <div id="panelGroup">
                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading">Panel with panel-default class</div>
                        <div class="panel-body">Panel Content</div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading">Panel with panel-primary class</div>
                        <div class="panel-body">Panel Content</div>
                    </div>

                    <div class="panel panel-success">
                        <div class="panel-heading">Panel with panel-success class</div>
                        <div class="panel-body">Panel Content</div>
                    </div>

                    <div class="panel panel-info">
                        <div class="panel-heading">Panel with panel-info class</div>
                        <div class="panel-body">Panel Content</div>
                    </div>

                    <div class="panel panel-warning">
                        <div class="panel-heading">Panel with panel-warning class</div>
                        <div class="panel-body">Panel Content</div>
                    </div>

                    <div class="panel panel-danger">
                        <div class="panel-heading">Panel with panel-danger class</div>
                        <div class="panel-body">Panel Content</div>
                    </div>
                </div>
            </div>

            <br><br>

        </div>
    </body>
</html>

显示运行结果

Cynhard85
关注
专栏目录
panel的content属性
风火一回，一生不毁
02-23 3731
在jquery-easyui中panel组件有content属性，默认情况下，该属性为null，接收值类型为：String，表示面板主体内容。 但是当content的值为null或""，面板并不会被更新而是延用上次面板加载的内容。 加载dialog的方法如下： function initWindow(idSlector,title,width,height,_content,nodeType
laravel学习过程中遇到的问题（三）
Mason Hu
02-06 326
laravel5.5搭建博客学习遇到的问题 配置路由如下： //文章列表页 Route::get('posts', '\App\Http\Controllers\PostController@index'); //文章详情页 Route::get('posts/{post}', '\App\Http\Controllers\PostController@show'); //创建文章
【Bootstrap 学习笔记】如何使用 Less
最新发布
【实力派，无需多言！】
07-11 258
CSS 是一门非程序式语言，没有变量、函数、作用域等概念。CSS 被称之为静态样式语言，从而导致样式文件的修改和维护困难。动态样式语言是指，在静态样式语言的基础上，添加了一门真正的语言所必需的元素：变量、数据类型、运算、逻辑结构、函数、继承等，从而大大提高样式的可修改和可维护性。Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
下载bootstrap并应用（学习笔记4）
qyqyqyi的博客
01-24 1122
利用bootstrap装饰网站
Bootstrap4 学习笔记2
极客神殿
09-04 336
这一篇记录通用工具类。 记录 Borders: // 设置边框 <span class="border"></span> <span class="border-top"></span> <span class="border-right"></span> <span class="border-bottom"></span> <span class="border-left"></span&g
（学习笔记）Bootstrap基础--Web组件
Clew123的博客
10-17 1718
学习笔记，方便查看。文本标题<h1>Bootstrap标题一<small>我是副标题</small></h1> <h2>Bootstrap标题二<small>我是副标题</small></h2> <h3>Bootstrap标题三<small>我是副标题</small></h3> <h4>Bootstrap标题四<small>我是副标题</small></h4> <h5>Bootstrap标题五<sm
BootStrap学习笔记（二）
Starrk的盗梦空间
03-06 325
Bootstrap 下拉菜单（Dropdowns） 如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。 对齐 通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。 Bootstrap 按钮组 btn-group按钮组 btn-toolbar按钮组的按钮组 按钮下拉菜单 如需向按钮添加下拉菜单，只需...
前端样式选择1-bootstrap学习笔记
格物致知
04-05 308
根据http://www.runoob.com/bootstrap/bootstrap-tutorial.html的教程，记录下学习的过程。 关键是熟悉或了解一些html标签的样式类，以便需要时，快速找到解决方案。 文中大部分图片来自于runoob网站,放在一起比较方便找到适合的样式 学习bootstrap的想法： [color=red]1.非前端程序员而言，比较常用有bootst...
Bootstrap4学习笔记2
笨笨D幸福 - 后花园
02-04 2315
Bootstrap4 学习笔记2 这一篇记录通用工具类。 记录 Borders: // 设置边框 span class="border">span> span class="border-top">span> span class="border-right">span> span class="border-bottom">span> span class="border-le
Bootstrap学习笔记——缩略图、警示框、进度条、媒体对象、列表组、画板
gengfu_php的博客
10-06 980
1 缩略图缩略图（一）缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。<div class="container"> <div class="row"> <div
Bootstrap学习笔记（七）其它内置组件
前端产品工程师
02-08 1631
缩略图（一） 缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。 源码文件：   ☑  LESS版本：对应文件thumbnails.less   ☑  Sa
前端学习笔记：Bootstrap框架入门
howard2005的专栏
02-22 1037
前端学习笔记：Bootstrap框架入门 一、Bootstrap概述 1、基本信息 ​Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstr...
matlab空间面板门槛,学习笔记——面板门槛模型
weixin_39929793的博客
03-20 3190
天鹰(中南财大——产业经济学博士研究生)E-mail: yanbinglh@163.com目录背景介绍1.面板门限模型简介1.1 面板门限模型1.2 面板门限模型估计1.3 面板门限模型检验1.4 多门限值面板模型1.5 面板门限模型建模步骤2.面板门限模型分析【Stata案例操作】背景介绍例如，我们可以考虑不同所有制、行业、产业、区域等情形下的企业盈利情况，可以通过设定相应的虚拟变量，构建变系数...
Bootstrap4：导航栏右侧对齐
热门推荐
Cynhard的专栏
12-12 2万+
Bootstrap 版本： bootstrap-4.0.0-beta.2通过Bootstrap4 的 Flex 布局可以很容易地将导航栏右侧对齐，只需要在包含导航栏的 <div> 加上 .justify-content-end 样式即可。示例： <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class=
Bootstrap学习笔记 18 - Collapse
Cynhard的专栏
12-01 720
Collapse实现Collapse 在某个元素（比如<div>）加上 .collapse 类，该元素用来显示折叠的内容 为了控制折叠内容的显示与隐藏，需要增加另外一个元素（ <a> 或者 <button>），并且加上 data-toggle="collapse" 类 为了将折叠元素与控制折叠的元素关联起来，需要在折叠元素上加上 id=xxx 并且在控制折叠的元素上加上 data-target=#x
Bootstrap学习笔记 20 - Navbar
Cynhard的专栏
12-04 659
基本形态<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_compon
Bootstrap学习笔记 15 - List Groups
Cynhard的专栏
11-30 650
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_components
Bootstrap学习笔记 11 - Button Groups
Cynhard的专栏
11-29 554
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_components
bootstrap学习笔记
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值