bootstrap-面板--基础面板

简介:

1.运行效果如图所示

wKioL1kn9qjzBVGgAAAWhh24_yI607.png-wh_50


2.实现代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>面板--基础面板</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">
</head>
<body>
    <div class="panel panel-default">
        <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
    </div>


    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
    crossorigin="anonymous"></script>
</body>
</html>



本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1929937
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
11月前
|
前端开发 容器
|
前端开发
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
|
前端开发
Bootstrap教程(25)--折叠面板、折叠面板导航
本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结
505 0
Bootstrap教程(25)--折叠面板、折叠面板导航
|
前端开发
Bootstrap教程(6)--使用面板
本文目录 1. 概述 2. 基本用法 3. 面板的不同样式 4. 小结
216 0
Bootstrap教程(6)--使用面板
|
前端开发
Bootstrap响应式前端框架笔记十五——面板与井
Bootstrap响应式前端框架笔记十五——面板与井
155 0
Bootstrap响应式前端框架笔记十五——面板与井
|
前端开发 容器
Bootstrap学习笔记--进度条,分页,Pager,列表,面板
进度条: 注意: Internet Explorer 9及更早版本不支持进度条(因为它们使用CSS3转换和 动画来实现其某些效果) 默认的进度条: 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 。
1126 0
|
前端开发 JavaScript
bootstrap 表格、表单、面板、模态框
表格 .table-responsive用来创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。.table-hover的效果是鼠标所在行底色变灰。 &lt;table class="table table-hover"&gt; &lt;caption&gt;宝丰一高2011高考成绩表(理科前1000)&lt;/capt
2008 0
|
JavaScript 前端开发
基于 Bootstrap 的响应式后台管理面板
  你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可以展现给你的团队或您的客户。
1106 0