分享好友 前端技术首页 频道列表

Bootstrap(11)列表组面板和嵌入组件 bootstrap表格组件

bootstrap  2023-02-08 18:590

一．列表组组件
列表组组件用于显示一组列表的组件。
//基本实例

        <ul class="list-group">
        <li class="list-group-item">1.这是起始</li>
        <li class="list-group-item">2.这是第二条数据</li>
        <li class="list-group-item">3.这是第三排信息</li>
        <li class="list-group-item">4.这是末尾</li>
    </ul>

Bootstrap(11)列表组面板和嵌入组件

//列表项带勋章

<ul class="list-group">
        <li class="list-group-item">1.这是起始<span class="badge">10</span></li></li>
        <li class="list-group-item">2.这是第二条数据</li>
        <li class="list-group-item">3.这是第三排信息</li>
        <li class="list-group-item">4.这是末尾</li>
    </ul>

Bootstrap(11)列表组面板和嵌入组件

//链接和首选

<!-- //链接和首选 -->
    <div class="list-group">
        <a href="#" class="list-group-item active">1.这是起始 <span class="badge">10</span></a> 
        <a href="#" class="list-group-item">2.这是第二条数据</a>
        <a href="#" class="list-group-item">3.这是第三排信息</a> 
        <a href="#" class="list-group-item">4.这是末尾</a>
    </div>

Bootstrap(11)列表组面板和嵌入组件

//按钮式列表

<!-- //按钮式列表 -->
    <div class="list-group">
        <button class="list-group-item active">
            1.这是起始 <span class="badge">10</span>
        </button>
        <button class="list-group-item">2.这是第二条数据</button>
        <button class="list-group-item">3.这是第三排信息</button>
        <button class="list-group-item">4.这是末尾</button>
    </div>

Bootstrap(11)列表组面板和嵌入组件

 

//设置项目被禁用

class="list-group-item disabled"

//情景类

<li class="list-group-item list-group-item-success">3.这是第三排信息</li>

//定制内容

    <!-- //定制内容 -->
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4>内容标题</h4>
            <p class="list-group-item-text">这里是相关内容详情！</p>
        </a> <a href="#" class="list-group-item">
            <h4>内容标题</h4>
            <p class="list-group-item-text">这里是相关内容详情！</p>
        </a> <a href="#" class="list-group-item">
            <h4>内容标题</h4>
            <p class="list-group-item-text">这里是相关内容详情！</p>
        </a>
    </div>

Bootstrap(11)列表组面板和嵌入组件

二．面板组件
面板组件就是一个存放内容的容器组件。
//基本实例

<div class="panel panel-default">
        <div class="panel-body">这里是详细内容区！</div>
    </div>

Bootstrap(11)列表组面板和嵌入组件

       <!-- //带标题容器的面板 -->
    <div class="panel panel-default">
        <div class="panel-heading">面板标题</div>
        <div class="panel-body">这里是详细内容区！</div>
    </div>
    <!--     //也可以设置标题元素 -->
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <!-- //带注脚的面板 -->
    <div class="panel-footer">这里是底部</div>

Bootstrap(11)列表组面板和嵌入组件

//情景效果：default、success、info、warning、danger、primary

        <div class="panel panel-success">
        <div class="panel-heading ">面板标题</div>
        <div class="panel-body ">这里是详细内容区！</div>
    </div>

Bootstrap(11)列表组面板和嵌入组件

//表格类面板

<div class="panel panel-default">
        <div class="panel-heading">表格标题</div>
        <div class="panel-body">
            <p>这里是表格标题的详细内容！</p>
        </div>
        <table class="table">
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    </div>

Bootstrap(11)列表组面板和嵌入组件

//列表类面板

       <div class="panel panel-default">
        <div class="panel-heading">表格标题</div>
        <div class="panel-body">
            <p>这里是表格标题的详细内容！</p>
        </div>
        <ul class="list-group">
            <li class="list-group-item">1.这里是首页</li>
            <li class="list-group-item">2.这里是第二个项目</li>
            <li class="list-group-item">3.这里是第三个项目</li>
            <li class="list-group-item">4.这里是第四个项目</li>
        </ul>
    </div>

Bootstrap(11)列表组面板和嵌入组件

三．响应式嵌入组件
根据被嵌入内容的外部容器的宽度， 自动创建一个固定的比例， 从而让浏览器自动确定
内容的尺寸，能够在各种设备上缩放。
这些规则可以直接用于<iframe>、<embed>、<video>和<object>元素。
//16:9 响应式

<div class="embed-responsive embed-responsive-16by9">
        <embed width="100%" height="100%" src="Bootstrap/img/haha.mp4" allowscr-iptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
    </div>

//4:3 响应式

<div class="embed-responsive embed-responsive-4by3">
        <embed width="100%" height="100%" src="Bootstrap/img/haha.mp4" allowscr-iptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
    </div>

Bootstrap(11)列表组面板和嵌入组件

 

查看更多关于【bootstrap】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
Bootstrap基础：选择器
1.CSS属性选择器[arrt=value]   该属性有指定的确切值[arrt~=value]  该属性值必须是多个空格隔开的值，比如，class=“title featured home”，而且这些值中的一个必须是指定的值“value”[arrt|=value]  属性的值就是“value”或者以“value”开始并立即

0评论2023-03-16469

Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");     国内访问不稳定,页面反应慢解决:将请求结果保存下来,放到本地,重新声明请求1.请求http:

0评论2023-03-16312

基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS
近几年，.net生态日益强大，特别是跨平台技术，性能提升，那真的是强大无比。为了日常能够快速开发，笔者基于基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS，请大家多提意见建议。在此，要感谢若依CMS的作者，借用了皮肤框架。懒的发文字描述

0评论2023-03-16505

elasticsearch bootstrap.memory_lock
检查bootstrap.memory_lock设置是否生效get http://10.127.0.1:9200/_nodes?filter_path=**.mlockall响应：{"nodes": {"9giihmDNRdS136KT52Gl5g": {"process": {"mlockall": true}},"X0zQESeeT8uJ9kVXvHpl-w": {"process":

0评论2023-03-08659

50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。本文向你推荐 50 个 Bootstrap 的插件，可以考虑在你下一个项目中使用它们。1. Boots

0评论2023-03-08629

Bootstrap资源 bootstrap官方文档
官方网站：http://getbootstrap.com/http://twitter.github.com/bootstrap/index.html 官方博客：http://blog.getbootstrap.com/  中文文档：http://wrongwaycn.github.com/bootstrap/docs/index.html  图标：Font Awesomehttp://fortawesome.github.com

0评论2023-03-08321

bootstrap bootstrap检验
bootstrap是简洁灵活的用于搭建web页面的Html，Css工具集。---是一组简洁强大的前端开发框架。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML框架。bootstrap中的js框架依赖于jquery，因此jquery要在bootstrap之前引进一般要把CS

0评论2023-03-08325

002-BootStrap基本模板 bootstrap 模型
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式，表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值理想宽度/可见宽度--meta name="vie

0评论2023-03-08506

003-BootStrap完整模板 bootstrap demo
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式，表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值理想宽度/可见宽度--!--视口的作用

0评论2023-03-08910

nginx 下 bootstrap fa 字体异常问题
server {listen 8082;#server_name192.168.16.88; #root/home/ywt/workspace/kuF/web/statics;#autoindex on; #autoindex_exact_size off; #autoindex_localtime on; # } 原配置如上，实际图标加载出来乱七八糟； 经过具体分析，实际css文件正常加载，字体

0评论2023-03-08960

bootstrap 响应式布局
先上点媒体查询css（某个著名的”段子“），跟bootstrap无关：htmlheadstylebody {background-color: white;}@media screen and (max-width: 960px){body {background-color: red;}}@media screen and (max-width: 768px){body {background-color: yellow;}}@

0评论2023-03-08482

bootstrap bootstrap用什么软件
bootstrap:简易模版：meta http-equiv='X-UA-Compatible' content='IE=edge' //让IE浏览器运行最新的渲染模式//meta name='renderer' content='webkit'让部分国产浏览器默认采用高速模式渲染页面meta name='viewport' content='width=device-width,initail-

0评论2023-03-08809

bootstrap怎样让按钮或者组件左右对齐 bootstrap怎么调整组件的位置
1.登录页的form表单可以是使用margin:0 auto的方式，居中对齐 2.div可以使用pull-right, text-center, pull-left 3.按钮或者p标签可以使用text-right, text-center, text-left

0评论2023-03-08949

更多推荐