<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移动设备优先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
    </style>
</head>
<body>
<h1>我们学习<span class="label label-default">bootstrap</span></h1>
<h2>我们学习<span class="label label-danger">bootstrap</span></h2>
<h3>我们学习<span class="label label-info">bootstrap</span></h3>
<h4>我们学习<span class="label label-warning">bootstrap</span></h4>

<hr/>
<a href="#">消息<span class="badge">5</span></a>
<button type="button">大家好<span class="badge">89</span></button>
<ul class="list-group">
    <li class="list-group-item"><a href="#">大家好</a><span class="badge">45</span></li>
    <li class="list-group-item"><a href="#">大家好</a><span class="badge">45</span></li>
    <li class="list-group-item"><a href="#">大家好</a><span class="badge">45</span></li>
</ul>
<div class="container">
    <div class="page-header">
        <h1>大屏展播，很好用，，<small>小标题</small></h1>
    </div>

    <div class="jumbotron">
        <h1>主要标题</h1>
        <p>这里是想写的文本。。。。。</p>
        <a href="#" class="btn btn-danger btn-lg">阅读更多</a>
    </div>
</div>
</body>
</html>

⑾bootstrap组件 徽章 大屏 页头 基础案例的更多相关文章

  1. ⑿bootstrap组件 缩略图 警告框 进度条 基础案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. Bootstrap 学习笔记4 巨幕页头略缩图警告框

  3. 第二百四十节，Bootstrap巨幕页头缩略图和警告框组件

    Bootstrap巨幕页头缩略图和警告框组件 学习要点: 1.巨幕组件 2.页头组件 3.缩略图组件 4.警告框组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:巨幕组件.页头组件.缩 ...

  4. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  5. Qt编写数据可视化大屏界面电子看板13-基础版

    一.前言 之前发布的Qt编写的可视化大屏电子看板系统,很多开发者比较感兴趣,也收到了很多反馈意见,纵观市面上的大屏系统,基本上都是B/S结构的web版本,需要在后台进行自定义配置模块,绑定数据源等,其 ...

  6. 一招教你轻松使用数据可视化BI软件创建旅游消费数据可视化大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以旅游消费数据可视化大屏为 ...

  7. 不会用数据可视化大屏？一招教你轻松使用数据可视化BI软件创建农业公司运营数据分析大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以农业公司运营数据分析大屏 ...

  8. 干货！手把手教你使用数据可视化BI软件创建企业变更流程监控大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以企业变更流程监控大屏为例 ...

  9. 手把手教你快速使用数据可视化BI软件创建互联网用户数据分析大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以互联网用户数据分析大屏为 ...

随机推荐

  1. .h（头文件） .lib（库文件） .dll（动态链接库文件） 之间的关系和作用的区分

    .h头文件是编译时必须的,lib是链接时需要的,dll是运行时需要的.附加依赖项的是.lib不是.dll,若生成了DLL,则肯定也生成 LIB文件.如果要完成源代码的编译和链接,有头文件和lib就够了 ...

  2. Glide 这样用，更省内存！！！

    一.前言 Glide 是 Google 官方推荐的一款图片加载库,使用起来也非常的简单便利,Glide 它帮我们完成了很多很重要,但是却通用的功能,例如:图片的加载压缩.展示.加载图片的内存管理等等. ...

  3. 51 nod 1624 取余最长路 思路：前缀和 + STL（set）二分查找

    题目: 写这题花了我一上午时间. 下面是本人(zhangjiuding)的思考过程: 首先想到的是三行,每一行一定要走到. 大概是这样一张图 每一行长度最少为1.即第一行(i -1) >= 1, ...

  4. Android Studio 字体和字号调整

    点击File,Settings. 找到Editor-Colors&Fonts-Font 点击Save As... 改个名字点击OK. 1为字体,2为字号,3为行间距. 我认为字体设置为Cons ...

  5. thinkphp增删改查

    添加数据: (添加单行数据) // 添加成功返回1,失败返回0 (添加多行数据) // 返回添加数据的条数 删除数据: 修改数据: (修改单个字段) (修改多个字段) // 修改成功返回1,失败返回0 ...

  6. java中需要注意的小细节

    很早以前就打算写博客,但是总是因为不知道写什么,或是觉得博客里其他人已经把我要写的整理很好了而迟迟没有动笔,现在决定把自己平时的记录的一些笔记拿出来,希望大神们可以批评指导,并且希望能够帮助一些刚刚入 ...

  7. css百分比参照大总结

    最近做PC端项目,由于要自适应到800*600,所以免不了要使用百分比的布局方式,但是一开始有点搞不清楚百分比的参照,于是页面的布局怎么调也调不好. 事后我进行了一下总结,希望能够帮到大家: 参照父元 ...

  8. nginx + keepalived 实现高可靠web网站

    组网图: 配置信息: 左边nigx 服务器的 /usr/local/nginx/conf/nginx.conf #user  nobody; worker_processes  1; #error_l ...

  9. 学习笔记之CSS样式（选择器背景字体边框绝/相对、固定位置and分层流等）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. db2备份还原

    还原步骤:创建好数据库后进入该数据库 .restore db TSMESDB from D:\ICSS\dbData on D:\ICSS\dbData  into TSMESDB redirect. ...