bootstrap-面板--基础面板

1.运行效果如图所示

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>
时间： 2024-10-09 21:12:50

bootstrap-面板--基础面板的相关文章

Bootstrap学习笔记面板(Panels)

本文将讲解Bootstrap面板(Panels).面板组件用于把DOM组件插入到一个盒子中.创建一个基本的面板,只需要向div元素添加class .panel和 panel-default即可,如下面的实例所示: html <h2>基本面板</h2> <div class="panel panel-default"> <div class="panel-body">这是一个基本的面板</div> </

Bootstrap组件之面板

.panel--指定div元素包裹面板组件: .panel-default..panel-primary..panel-success. .panel-info..panel-warning..panel-danger--指定面板的情境效果: .panel-heading--设置面板的标题部分: .panel-body--设置面板的主体部分: .panel-footer--设置面板的脚注部分: <!DOCTYPE html> <html lang="zh_CN">

【Java GUI】Java面板基础：JPanel

面板有两种,普通面板(JPanel)和滚动面板(JScrollPane) Jpanel 面板是一种通用容器,JPanel的作用是实现界面的层次结构,在它上面放入一些组件,也可以在上面绘画,将放有组件和有画的JPanel再放入另一个容器里.JPanel的默认布局为FlowLayout. 面板处理程序的基本内容有以下几个方面: ①通过继承声明JPanel类的子类,子类中有一些组件,并在构造方法中将组件加入面板 ②声明JPanel子类对象 ③创建JPanel子类对象 ④将JPanel子类对象加入到某个

宝塔Linux面板基础命令

安装宝塔Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install.sh && sh install.sh管理宝塔 停止 /etc/init.d/bt stop 启动 /etc/init.d/bt start 重启 /etc/init.d/bt restart 卸载 /etc/init.d/bt stop && chkconfig --d

Java基础-面板组件

unity引擎澳门葡京平台搭建操作面板基础

目前已经用creator开发澳门葡京平台搭建论坛:haozbbs.com Q1446595067 了好几款游戏了,现在可以做一些总结了. 1.关于预制资源体.进入游戏场景,预制资源中不能有太多的节点(比如sprite,spine......).预制资源使用uuid等一系列手段绑定生成资源.调用等,在加载的时候去寻找.设置等等,会花费大量的时间.然而如果在start函数中去创建,使用的时间就会少得多.当然在编辑器命名的名字,在代码中也最好同名,方便你我他. 2.关于数组资源.creator的拖拽调

BootStrap之基础-3 组件

一.组件 字体图标 - 注意事项 - 不要和其他组件混合使用 - 只对内容为空的元素起作用 - 可访问性 aria-hidden="true" aria-label="" .sr-only 下拉菜单 - 基本格式 - <div class="dropdown|dropup"> <button data-toggle="dropdown"> <ul class="dropdown-menu

Bootstrap 的基础练习

1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="widt

Boostrap入门+样式学习--贰--（慕课网大漠《玩转bootstrap》[基础]）

1. 标题样式 除了有标签 h1~h6 之外,bootstrap还提供了对应的六个类名:.h1~.h6 重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px:h4~h6重置后的值都是10px. 所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体. 固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px. 2.副标题 small标签