zoukankan      html  css  js  c++  java
  • 面板

    面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。

    带有头和尾的面板

    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </div>
        <div class="panel-footer">作者:大漠</div>
    </div>

    彩色面板

    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者:大漠</div>
    </div>
    <div class="panel panel-primary">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者:大漠</div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者:大漠</div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者:大漠</div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者:大漠</div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性</div>
        <div class="panel-footer">作者:大漠</div>
    </div>

    面板中嵌套表格

    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>我的书</th>
                    <th>发布时间</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>《图解CSS3》</td>
                    <td>2014-07-10</td>
                </tr>
            </tbody>
        </table>
        </div>
        <div class="panel-footer">作者:大漠</div>
    </div>

    在实际应用运中,你或许希望表格和面板边缘不需要有任何的间距。但由于panel-body设置了一个padding:15px的值,为了实现这样的效果。我们在实际使用的时候需要把table提取到panel-body外面

    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">
            <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
            </p>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>我的书</th>
                    <th>发布时间</th>
                </tr>
            </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>《图解CSS3》</td>
                <td>2014-07-10</td>
            </tr>
        </tbody>
        </table>
        <div class="panel-footer">作者:大漠</div>
    </div>

    面板中嵌套列表组

    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">
            <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
            </p>
            <ul class="list-group">
                <li class="list-group-item">我是列表项</li>
                <li class="list-group-item">我是列表项</li>
                <li class="list-group-item">我是列表项</li>
            </ul>
        </div>
        <div class="panel-footer">作者:大漠</div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">图解CSS3</div>
        <div class="panel-body">
            <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
            </p>
        </div>
        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
        </ul>
        <div class="panel-footer">作者:大漠</div>
    </div>

  • 相关阅读:
    论工作动力的来源是什么?答案是来自于实现自己的梦想
    向梦想者致敬
    内置函数,递归函数,模块与包,开发目录规范
    迭代器,生成器
    闭包函数,装饰器,语法糖
    函数对象,名称空间及查找,作用域
    函数调用与参数
    字符编码
    文件处理
    python 11.5数据类型及常用方法
  • 原文地址:https://www.cnblogs.com/family-626-77/p/5789649.html
Copyright © 2011-2022 走看看