bootstrap------4------

• 徽章，就是一个类似消息提醒的工具一样。

  <li><a href="#">Messages <span class="badge">3span>a>li>

• 面板

<div class="panel panel-default">
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格div>
div>

• 这个就基本讲了有一点格式

• 一个有头有尾的面板

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

• 他还提供了一些样式

  • panel-primary：重点蓝
  • panel-success：成功绿
  • panel-info: 信息蓝
  • panel-warning：警告
  • panel-danger：危险红

• 弹出框

<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×span><span class="sr-only">Closespan>button>
                <h4 class="modal-title">模态弹出窗标题h4>
            div>
            <div class="modal-body">
                <p>模态弹出窗主体内容p>
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
                <button type="button" class="btn btn-primary">保存button>
            div>
        div>
    div>
div>

☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

• 弹窗触发

<a data-toggle="modal" href="#mymodal-link" class="btn btn-primary">通过链接href属性触发a>

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="mymodal-link">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×span><span class="sr-only">Closespan>button>
                <h4 class="modal-title">模态弹出窗标题h4>
            div>
            <div class="modal-body">
                <p>模态弹出窗主体内容p>
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
                <button type="button" class="btn btn-primary">保存button>
            div>
        div>
    div>
div>


<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#mymodal-data">通过data-target触发button>

<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×span><span class="sr-only">Closespan>button>
                <h4 class="modal-title">模态弹出窗标题h4>
            div>
            <div class="modal-body">
                <p>模态弹出窗主体内容p>
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭button>
                <button type="button" class="btn btn-primary">保存button>
            div>
        div>
    div>
div>

注意，一定要有data-target=#+id注意#号。

---

可以通过加一个fade类来让他有渐变效果，很好看的