bootstrap的简单笔记

红太狼 2023-03-06 03:55 4阅读 0赞

浏览器支持：所有主流浏览器都支持Bootstrap。  
容易上手：只要有html、css的基础，就可以开始学习。  
**响应式**设计：Bootstrap的响应式css能够自适应台式机、平板电脑和手机。  
简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。  
基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。  
自定义JQuery插件，完整的类库，基于Less等。  
三个必要文件：

## 文本 ##

**1、标题**  
class=“h1”，class=“h2”。。。。

<div class="h1">Bootstrap标题一</div>
    <div class="h2">Bootstrap标题二</div>
    <div class="h3">Bootstrap标题三</div>
    <div class="h4">Bootstrap标题四</div>
    <div class="h5">Bootstrap标题五</div>
    <div class="h6">Bootstrap标题六</div>

**2、内联子标题**

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>

**3、强调段落**  
class=“lead”

<p class="lead">
    这是一个演示引导主体副本用法的实例。
    </p>

**4、强调内容**

<small>（设置文本为父文本大小的 85%）、、<em>或<i>来实现文本斜体
     <b>和<strong>标签让文本直接加粗。

<p>平台<small>你值得拥有</small></p>
    <p>平台<strong>学习</strong>学习</p>
    <p>平台<em>学习</em>平台</p>

class=“text-muted”、class=“text-waring”…

<p class="text-muted">博思智能学习平台</p>
    <p class="text-warning">博思智能学习平台</p>
    <p class="text-danger">博思智能学习平台</p>
    <p class="text-info">博思智能学习平台</p>
    <p class="text-success">博思智能学习平台</p>

**文本对齐**

<p class="text-left">我居左</p>
    <p class="text-center">我居中</p>
    <p class="text-right">我居右</p>
    <p class="text-justify">我两端对齐</p>

特别声明：目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。

## 列表 ##

有序列表：有序列表是指以数字或其他有序字符开头的列表  
无序列表：没有特定顺序的列表，着重号开头的列表  
定义列表：在这种类型的列表中，每个列表可以包含

<dt>和<dd>元素

<h4>有序列表</h4>
    	<ol>
    		<li>item1</li><li>item2</li><li>item3</li><li>item4</li>
    	</ol>
    	<h4>无序列表</h4>
    	<ul>
    		<li>item1</li><li>item2</li><li>item3</li><li>item4</li>
    	</ul>
    	<h4>未定义样式列表</h4>
    	<ul class="list-unstyled">
    		<li>item1</li><li>item2</li><li>item3</li><li>item4</li>
    	</ul>
    	<h4>内联列表</h4>
    	<ul class="list-inline">
    		<li>item1</li><li>item2</li><li>item3</li><li>item4</li>
    	</ul>
    	<h4>定义列表</h4>
    	<dl>
    	    <dt>demo1</dt><dd>我是demo1</dd><dt>demo2</dt><dd>我是demo2</dd>
    	</dl>
    	<h4>水平定义列表</h4>
    	<dl class="dl-horizontal">
    	    <dt>demo1</dt><dd>我是demo1</dd><dt>demo2</dt><dd>我是demo2</dd>
    	</dl>

## 表格 ##

class=“table” 、class=“table table-striped”( 内的行上看到条纹)、class=“table table-bordered”(到每个元素周围都有边框，且占整个表格是圆角的)、class=“table table-hover”(指针悬停在行上时会出现浅灰色背景)、class=“table table-condensed”(行内边距（padding）被切为两半，让表看起来更紧凑)  
为表格添加颜色：

<table class="table">
       <caption>上下文表格布局</caption>
       <thead>
          <tr>
             <th>产品</th>
             <th>付款日期</th>
             <th>状态</th>
          </tr>
       </thead>
       <tbody>
          <tr class="info">
             <td>产品1</td>
             <td>23/11/2015</td>
             <td>待发货</td>
          </tr>
          <tr class="success">
             <td>产品2</td>
             <td>10/11/2015</td>
             <td>发货中</td>
          </tr>
          <tr  class="warning">
             <td>产品3</td>
             <td>20/10/2015</td>
             <td>待确认</td>
          </tr>
          <tr  class="danger">
             <td>产品4</td>
             <td>20/10/2015</td>
             <td>已退货</td>
          </tr>
       </tbody>
    </table>

自适应表格，加上`<div class="table-responsive"></div>`

属性可以多个：

## 表单 ##

**搜索表单**  
**行内表单**  
**水平表单**

## 按钮 ##

**按钮样式：**  
class=“btn btn-default(primary/success/info/warning/danger)”  
**按钮尺寸**  
class=“btn lg(sm/xs/block)”  
**禁止按钮**  
class=“btn disabled”

建议在button元素使用class,避免跨浏览器的不一致问题

## 图片 ##

class=“img-rounded”  
class=“img-circle”  
class=“img-polaroid”:添加一些内边距和一个灰色的边框

## 图标 ##

<span class="glyphicon glyphicon-search"></span>
    		<span class="glyphicon glyphicon-asterisk"></span>
    		<span class="glyphicon glyphicon-plus"></span>
    		<span class="glyphicon glyphicon-cloud"></span>
    。。。。。。。

小结：  
css样式，基本上都是定义好的类，例如：标题怎么设置，列表的样式，几种不同表格的样式，表单的样式，还有块状按钮，按钮状态分别用什么类，以及最后的图片和图标。只要熟记得就行

## 组件 ##

**下拉菜单**  
第一步：使用一个名为“dropdown”的容器包裹了整个下拉菜单元素：`<div class=”dropdown”></div>`。

第二步：使用了一个`<button>`按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，例如：data-toggle=“dropdown”。

第三步：下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

用于展示可切换、有关联的一系列链接。与下拉菜单JavaScript插件配合使用。

<li role="presentation" class="divider"></li>
      下拉分割线

class=“disabled”、class=“hover(active)”，使得下拉菜单的一些状态  
**下拉菜单的子菜单**  
通过添加一些简单的标记，可以给下拉菜单增加一个二级菜单，这个二级菜单会在鼠标悬停时自动展现。在现有的下拉菜单中，给任意的li添加.dropdown-submenu即可自动赋予一个二级菜单。  
**按钮组**  
等分按钮尽量使用`<a>`来制作按钮，因为使用`<button>`标签元素时，使用display:table在部分浏览器下支持并不太友好

**导航元素**  
class=“nav nav-tabs”(标签式)  
class=“nav nav-pills”( 胶囊)  
class=“nav nav-pills nav-stacked”(垂直堆叠)  
加上这个class="btn-group-justified"使得变成**自适应**按钮组，现在导航元素 加上class=“nav-justified”，让它自适应  
**导航菜单添加下拉菜单**  
带有下拉菜单的标签  
向标签添加下拉菜单的步骤如下：  
以一个带有 class=“nav” 的无序列表开始。  
添加class=“nav nav-table”  
添加带有class=“dropdown-men” 的无序列表。

<ul class="nav nav-tabs">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">SVN</a></li>
       <li><a href="#">iOS</a></li>
       <li><a href="#">VB.Net</a></li>
       <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
             Java <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
             <li><a href="#">Swing</a></li>
             <li><a href="#">jMeter</a></li>
             <li><a href="#">EJB</a></li>
             <li class="divider"></li>
             <li><a href="#">分离的链接</a></li>
          </ul>
       </li>
       <li><a href="#">PHP</a></li>
    </ul>

导航列表：  
class=“nav nav-list”

<ul class="nav nav-list">
      <li class="nav-header">List header</li>
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">java</a></li>
      <li><a href="#">php</a></li>
      <li><a href="#">bootstrap</a></li>
    </ul>

**可切换的标签导航栏**  
为了让标签页可切换，需要在class="tab-content"中创建一个带有唯一ID的class=“tab-pane”。

<div class="tabbable"> 
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">php</a></li>
        <li><a href="#tab2" data-toggle="tab">bootstrap</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>like php</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>like bootstrap</p>
        </div>
      </div>
    </div>

**面包屑导航**  
class=“breadcrumb”

<ul class="breadcrumb">
            <li><a href="#">首页</a> <span class="divider">/</span></li>
            <li><a href="#">Library</a> <span class="divider">/</span></li>
            <li class="active">Data</li>
        </ul>

反色导航条  
主色调为黑色，将class="navbar-deafult"类名换成class=“navbar-inverse”

**固定导航条**  
class=“navbar-fixed-top”：导航条固定在浏览器窗口顶部；class=“navbar-fixed-bottom”：导航条固定在浏览器窗口底部。使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可。

**响应式导航条**  
1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。  
**标签**  
标签可用于计数、提示或页面上其它的标记显示。使用 class .label 来显示标签，您可以使  
用修饰的 class=" label-default"、class=“label-important”、class=“label-success”、class=“label-info”

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。  
徽章（Badges）主要用于突出显示新的或未读的项  
**警告框**  
默认可以关闭的警告框

<div class="alert">
      <button type="button" class="close" data-dismiss="alert">×</button>
      <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>

**进度条**  
条纹样式（使用渐变创建的一个条纹效果的进度条。不支持IE7-8）

<div class="progress">
      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete</span></div>
    </div>

**带值的进度条**

<div class="progress">
      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">40%</div>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span>20%</div>
    </div>

**带链接的列表组**

<div class="list-group">
        <a href="##" class="list-group-item list-group-item-success active">图解CSS3</a>
        <a href="##" class="list-group-item list-group-item-info">W3C</a>
        <a href="##" class="list-group-item list-group-item-warning">Sass中国</a>
        <a href="##" class="list-group-item list-group-item-danger disabled"><span class="badge">10</span>失效Mobile教程</a>
        
    </div>

## 模态弹框（modal） ##

含义：覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等  
结构分析：  
分别运用了modal、modal-dialog和modal-content样式。  
弹出窗真正的内容都放置在modal-content中，其主要又包括三个部分：弹出框头部，一般使用**modal-header**表示，主要包括标题和关闭按钮；弹出框主体，一般使用**modal-body**表示，弹出框的主要内容；弹出框脚部，一般使用**modal-footer**表示，主要放置操作按钮。  
实现原理解析：  
bootstrap中的“模态弹出框”有以下几个特点：模态弹出窗是固定在浏览器中的；模态弹出窗宽度是自适应的，而且modal-dialog水平居中；当浏览器视窗大于768px时，模态弹出窗的宽度为600px。  
尺寸选择：  
modal-lg大尺寸  
modal-sm小尺寸（默认）  
**实现方式：**  
属性声明方式：  
通过data属性无需编写JavaScript代码即可生成一个对话框。在一个主控元素，例如按钮上设置data-toggle=“modal”，然后再设置data-target="\#foo" 或href="\#foo" 用以指向某个将要被启动的对话框。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript代码实现：  
仅用一行JavaScript代码即可启动id为myModal的对话框

$(’\#myModal’).modal(options)

选项：  
上面的选项都可以通过data属性或JavaScript代码传递给组件。对于data属性，将选项名称附着于data-字符串之后，就像data-backdrop=""一样。  
**自定义属性触发模态弹出框：**

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>模态弹出窗的使用</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    </head>
    <body>
    
    <a class="btn btn-primary" data-toggle="modal" href="#mymodal-link">通过链接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">Close</span></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">Close</span></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>
    <script src="../javascript/jquery.js"></script>
    <script src="../javascript/bootstrap.js"></script> 
    </body>
    </html>

通过js来触发模态弹出框

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>模态弹出窗JS触发</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    </head>
    <body>
    <button class="btn btn-primary" type="button">点击我</button>
    <div class="modal" id="themodal"  tabindex="-1">
        <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">Close</span></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>
    <script src="../javascript/jquery.js"></script>
    <script src="../javascript/bootstrap.js"></script> 
    <script type="text/javascript">
      $(function(){
        $(".btn").click(function(){
          $("#themodal").modal("toggle");
        });
      });
    </script>
    
    </body>
    </html>

选项：  
可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5MzcxMQ_size_16_color_FFFFFF_t_70]  
方法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5MzcxMQ_size_16_color_FFFFFF_t_70 1]

## 下拉菜单 ##

一种是属性声明式用法，另一种是JavaScript方法。  
属性声明方式：  
通过data属性在链接或按钮上添加data-toggle="dropdown"即可切换下拉菜单。

<div class="dropdown">
      <a class="dropdown-toggle btn" data-toggle="dropdown" href="#">下拉</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li>bootstrap</li>
            <li>bootstrap</li>
            <li>bootstrap</li>
      </ul>
    </div>

通过JavaScript调用下拉菜单：

$('.dropdown-toggle').dropdown()

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>下拉菜单--JavaScript触发方法</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    </head>
    <body>
    <ul class="nav nav-pills">
        <li class="dropdown">
    		<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
    		<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
    			<li role="presentation"><a href="##">CSS3</a></li>
    			<li role="presentation"><a href="##">HTML5</a></li>
    			<li role="presentation"><a href="##">Sass</a></li>
    		</ul>
    	</li>
    	<li class="active"><a href="##">前端论坛</a></li>
    	<li><a href="##">关于我们</a></li>
    </ul>
    <script src="../javascript/jquery.js"></script>
    <script src="../javascript/bootstrap.js"></script>
    
    
    <script type="text/javascript">
    $(function(){
        $(".dropdown-toggle").one("click",function(){
            $(this).dropdown("toggle");
        })
    })
    </script>
    </body>
    </html>

## 滚动监听 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>讯飞教育</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="../css/bootstrap.css" rel="stylesheet">
      <script src="../javascript/jquery.js"></script>
      <script src="../javascript/bootstrap.js"></script>
      <style>
      body {
          position: relative;
      }
      ul.nav-pills {
          top: 20px;
          position: fixed;
      }
      div.col-sm-9 div {
          height: 400px;
          font-size: 28px;
      }
      #section1 {color: #fff; background-color: #1E88E5;border-radius: 7px;}
      #section2 {color: #fff; background-color: #673ab7;border-radius: 7px;}
      #section3 {color: #fff; background-color: #ff9800;border-radius: 7px;}
      #section41 {color: #fff; background-color: #00bcd4;border-radius: 7px;}
      #section42 {color: #fff; background-color: #009688;border-radius: 7px;}
      
      @media screen and (max-width: 810px) {
        #section1, #section2, #section3, #section41, #section42  {
            margin-left: 150px;
        }
      }
      </style>
    </head>
    <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
    
    <div class="container">
      <div class="row">
        <nav class="col-sm-3" id="myScrollspy">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#section41">Section 4-1</a></li>
                <li><a href="#section42">Section 4-2</a></li>                     
              </ul>
            </li>
          </ul>
        </nav>
        <div class="col-sm-9">
          <div id="section1">    
            <h1>Section 1</h1>
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
          </div>
          <div id="section2"> 
            <h1>Section 2</h1>
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
          </div>        
          <div id="section3">         
            <h1>Section 3</h1>
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
          </div>
          <div id="section41">         
            <h1>Section 4-1</h1>
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
          </div>      
          <div id="section42">         
            <h1>Section 4-2</h1>
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
          </div>
        </div>
      </div>
    </div>
    </body>
    </html>

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="../css/bootstrap.css" rel="stylesheet">
      <script src="../javascript/jquery.js"></script>
      <script src="../javascript/bootstrap.js"></script>
      <style>
      body {
          position: relative; 
      }
      #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
      #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
      #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
      #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
      #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
      </style>
    </head>
    <body data-spy="scroll" data-target=".navbar" data-offset="50">
    
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>                        
          </button>
          <a class="navbar-brand" href="#">滚动监听</a>
        </div>
        <div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
              <li><a href="#section1">Section 1</a></li>
              <li><a href="#section2">Section 2</a></li>
              <li><a href="#section3">Section 3</a></li>
              <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#section41">Section 4-1</a></li>
                  <li><a href="#section42">Section 4-2</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>    
    
    <div id="section1" class="container-fluid">
      <h1>Section 1</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section2" class="container-fluid">
      <h1>Section 2</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section3" class="container-fluid">
      <h1>Section 3</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section41" class="container-fluid">
      <h1>Section 4 Submenu 1</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="section42" class="container-fluid">
      <h1>Section 4 Submenu 2</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    
    </body>
    </html>

## 选项卡导航栏 ##

声明式选项卡需要满足以下几点要求:  
1、选项卡导航链接中要设置data-toggle=“tab”  
2、并且设置data-target=“对应内容面板的选择符（一般是ID）”;如果是链接的话，还可以通过href=“对应内容面板的选择符（一般是ID）”。主要气的作用是用户点击的时候找到该选择符所对应的面板内容tab-pane  
3、面板内容统一放在tab-content容器中，而且每个内容面板tab-pane都需要设置一个独立的选择符（最好是ID）与选项卡中的data-target或href的值匹配  
4、看出产生渐入的效果。在添加fada样式时，最初的默认显示的内容面板一定要记得加上in类名，不然看不出这样的效果

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>声明式触发选项卡（添加fade样式）</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    </head>
    <body>
    
    <ul id="myTab" class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
        <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
        <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    	<li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
    	<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
    </ul>
    
    <div id="myTabContent" class="tab-content">
    	<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    	<div class="tab-pane fade" id="rule">规则内容面板</div>
    	<div class="tab-pane fade" id="forum">论坛内容面板</div>
    	<div class="tab-pane fade" id="security">安全内容面板</div>
    	<div class="tab-pane fade" id="welfare">公益内容面板</div>
    </div>
    <br />
    <br />
    
    
    
    <ul id="myTab" class="nav nav-pills" role="tablist">
        <li class="active"><a href="#bulletin1" role="tab" data-toggle="pill">公告</a></li>
        <li><a href="#rule1" role="tab" data-toggle="pill">规则</a></li>
        <li><a href="#forum1" role="tab" data-toggle="pill">论坛</a></li>
        <li><a href="#security1" role="tab" data-toggle="pill">安全</a></li>
        <li><a href="#welfare1" role="tab" data-toggle="pill">公益</a></li>
    </ul>
    
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="bulletin1">公告内容面板</div>
        <div class="tab-pane fade" id="rule1">规则内容面板</div>
        <div class="tab-pane fade" id="forum1">论坛内容面板</div>
        <div class="tab-pane fade" id="security1">安全内容面板</div>
        <div class="tab-pane fade" id="welfare1">公益内容面板</div>
    </div>
    <script src="../javascript/jquery.js"></script>
    <script src="../javascript/bootstrap.js"></script> 
    </body>
    </html>

js方式触发标签页：

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>标签页--JavaScript触发方法</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../javascript/jquery.js"></script>
    <script src="../javascript/bootstrap.js"></script> 
    <script type="text/javascript">
        $(function(){
        $("#myTab a").click(function(e){
            e.preventDefault();
            $(this).tab("show");
        });
    })
    </script>
    </head>
    <body>
    
    <ul id="myTab" class="nav nav-pills" role="tablist">
        <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
        <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
        <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
        <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
        <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
    </ul>
    
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
        <div class="tab-pane fade" id="rule">规则内容面板</div>
        <div class="tab-pane fade" id="forum">论坛内容面板</div>
        <div class="tab-pane fade" id="security">安全内容面板</div>
        <div class="tab-pane fade" id="welfare">公益内容面板</div>
    </div>
    </body>
    </html>

## 工具提示 ##

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：  
通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle=“tooltip” 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：

$('#identifier').tooltip(options)

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其它插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

$(function () { $("[data-toggle='tooltip']").tooltip(); });

通过为标签添加data-placement属性来实现提示框的位置变化：  
data-placement="left"左侧提示框  
data-placement=“top” 顶部提示框  
data-placement="right"右侧提示框  
data-placement=“bottom” 底部提示框

<!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="utf-8">
      <title>触发提示框方法</title>
      <link rel="stylesheet" href="../css/bootstrap.css">
    
      <style id="jsbin-css">
      body {
        padding: 100px;
      }
      .btn {
        margin: 20px 10px 20px;
      }
      </style>
    </head>
    <body>
      <h3>按钮做的提示框</h3>
      <button type="button" 
              class="btn btn-default" 
              data-toggle="tooltip" 
              data-placement="left" 
              data-original-title="提示框居左" 
              title="">
      提示框居左      
      </button>
      <button type="button" 
              class="btn btn-default" 
              data-toggle="tooltip" 
              data-placement="top" 
              data-original-title="提示框在顶部">
       提示框在顶部
      </button>
      <button type="button" 
              class="btn btn-default" 
              data-toggle="tooltip" 
              data-placement="bottom" 
              data-original-title="提示框在底部">
      提示框在底部             
      </button>
      <button type="button" 
              class="btn btn-default" 
              data-toggle="tooltip" 
              data-placement="right" 
              data-original-title="提示框居右">
      提示框居右      
      </button>
      <h3>链接制作的提示框</h3>
      <a class="btn btn-primary" 
         data-toggle="tooltip" 
         data-placement="left" 
         title="提示框居左">
         提示框居左
      </a>
      <a class="btn btn-primary" 
         data-toggle="tooltip" 
         data-placement="top" 
         title="提示框在顶部">
         提示框在顶部
      </a>
      <a class="btn btn-primary" 
         data-toggle="tooltip" 
         data-placement="bottom" 
         title="提示框在底部">
         提示框在底部
      </a>
      <a class="btn btn-primary" 
         data-toggle="tooltip" 
         data-placement="right" 
         title="提示框在居右">
         提示框居右
      </a>
      <a href="##" 
         class="btn btn-primary" 
         id="myTooltip">
         我是提示框
      </a>
      <a href="##" 
         class="btn btn-primary" 
         id="myTooltip2">
         我是提示框2
      </a>
      <script src="../javascript/jquery.js"></script>
      <script src="../javascript/bootstrap.js"></script>
      <script type="text/javascript">
      $(function(){
        $('[data-toggle="tooltip"]').tooltip();//前面的提示框。除去后两个
        
      });
    
      $(function(){
        $('#myTooltip').tooltip({
          title:"我是一个提示框，我在顶部出现",
          placement:'top'
        });
      });
    
      $(function(){
    //  $('[data-toggle="tooltip"]').tooltip();
        $('#myTooltip2').tooltip({
          title:"我是一个提示框，我在底部出现",
          placement:'bottom'
        });
      });
      </script>
    </body>
    </html>

## 弹出提示的使用 ##

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：  
通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle=“popover” 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

<a href="#" data-toggle="popover" title="Example popover">
       请悬停在我的上面
    </a>

通过 JavaScript：通过 JavaScript 启用弹出框（popover）：

$('#identifier').popover(options)

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

$(function () { $("[data-toggle='popover']").popover(); });

<!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="utf-8">
      <title>触发弹出框的方法</title>
      <link rel="stylesheet" href="../css/bootstrap.css">
      <script src="../javascript/jquery.js"></script>
      <script src="../javascript/bootstrap.js"></script>
      <style>
      body{
        padding: 10%;
      }
      </style>
    </head>
    <body>  
    <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="提示框居左"  data-content="我是弹出框的内容">猛击我吧</button>
    <button type="button"  class="btn btn-default"  id="myPopover">猛击我吧</button>
    <script type="text/javascript">
    $(function(){
    	//例一
        $('[data-toggle="popover"]').popover();
        //例二
        $('#myPopover').popover({
            title:"弹出框的标题",
            content:"弹出框的内容",
            placement:"right" 
        });   
    });
    </script>
    </body>
    </html>

## 警告框 ##

通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss=“alert”，就会自动为警告框添加关闭功能。

通过 JavaScript：通过 JavaScript 添加可取消功能：

$(".alert").alert()

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>警告框</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    </head>
    <body>
    <h3>使用×作为关闭按钮</h3>
    <div class="alert alert-success" role="alert">
        <button class="close" data-dismiss="alert"  type="button" >×</button>
        <p>恭喜您操作成功！</p>
    </div>
    
    <h3>使用a标签作为关闭按钮</h3>
    <div class="alert alert-warning" role="alert">
    	<h4>谨防被骗</h4>
    	<p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
    	<a href="#" class="btn btn-danger" data-dismiss="alert">关闭</a>
    </div>
    
    <h3>使用button按钮作为关闭按钮</h3>
    <div class="alert alert-warning" role="alert" id="myAlert">
    	<h4>谨防被骗</h4>
    	<p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
    </div>
    <button type="button" data-target="#myAlert" data-dismiss="alert" class="btn btn-danger" >关闭</button>
    
    <h3>JavaScript触发警告框</h3>
    <div class="alert alert-danger" role="alert" id="myAlert">
        <h4>谨防被骗</h4>
        <p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
        <button type="button"  class="btnbtn-danger" id="close">关闭</button>
    </div>
      <script src="../javascript/jquery.js"></script>
      <script src="../javascript/bootstrap.js"></script> 
      <script type="text/javascript">
          $(function(){
            $("#close").on("click",function(){
                $(this).alert("close");
            });
          });
      </script>
    </body>
    </html>

## 按钮 ##

加载状态：  
如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text=“Loading…” 作为其属性即可，如下面实例所示：

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." 
       type="button"> 加载状态
    </button>
    <script>
       $(function() { 
          $(".btn").click(function(){
             $(this).button('loading').delay(1000).queue(function() {
                
             });        
          });
       });  
    </script>

单个切换：  
如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle=“button” 作为其属性即可。  
复选框（Checkbox）：  
您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle=“buttons” 来添加复选框组的切换。  
单选按钮（Radio）：  
类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle=“buttons” 来添加单选按钮组的切换。

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>按钮插件--按钮状态切换</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../javascript/jquery.js"></script>
    <script src="../javascript/bootstrap.js"></script>
    <style>body{padding:10px;margin:10px}</style>
    </head>
    <body>
    <div class="btn-group" data-toggle="buttons">
        <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" data-loading-text="Loading...">确认</button>
    </div>
      <script type="text/javascript">
           //code
         $(function () {
            $("#mybutton").click(function () {
                $(this).button('loading').queue(function () {
                })
            })
        })
      </script>
    </body>
    </html>

## 使用折叠制作手风琴组件 ##

可以通过以下两种方式使用折叠（Collapse）插件：  
通过 data 属性：向元素添加 data-toggle=“collapse” 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。  
为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="\#selector"。  
通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：  
$(’.collapse’).collapse()

<!DOCTYPE html>
    <html>
      <head>
      <meta charset="utf-8">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link href="../css/bootstrap.css" rel="stylesheet">
     <script src="../javascript/jquery.js"></script>
        <script src="../javascript/bootstrap.js"></script>
      </head>
      <body>
    
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseOne"  data-toggle="collapse" data-parent="#accordion">
                        点击我进行展开，再次点击我进行折叠。第1部分
                    </a>
    
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                  学习平台学习平台学习平台学习平台学习平台
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
                        点击我进行展开，再次点击我进行折叠。第2部分
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse ">
                <div class="panel-body">
                    学习平台学习平台学习平台学习平台学习平台
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">
                        点击我进行展开，再次点击我进行折叠。第3部分
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse ">
                <div class="panel-body">
                     学习平台学习平台学习平台学习平台学习平台
                </div>
            </div>
        </div>
    </div>
        
      </body>
    </html>

## 轮播 ##

第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发；  
第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有顺列表来制作；  
第三步：设计轮播图片播放区。轮播图整个效果中，播放区是最关键的一个区域，这个区域主要用来放置需要轮播的图片。这个区域使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片；  
第四步：设计轮播图片控制器。很多时候轮播图片还具有一个向前播放和向后播放的控制器。在 Carousel 中通过 carousel-control 样式配合 left 和 right 来实现。其中left表示向前播放，right表示向后播放。其同样放在carousel容器内  
属性声明方式实现图片轮播

**声明式方法是通过定义 data 属性来实现**，data 属性可以很容易地控制轮播的位置。其主要包括以下几种：  
data-ride 属性：取值 carousel，并且将其定义在 carousel 上。  
data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“\#slidershow”，并且将其定义在轮播图计数器的每个 li 上。  
data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID名或其他样式识别符。  
data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to=“2”，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。  
data-wrap属性：取值false时表示轮播不持续循环。  
data-interval属性：取值number，表示轮播时间间隔为多长时间。  
**JS方式实现图片轮播**  
默认情况之下，如果 carousel 容器上定义了 data-ride=“carousel” 属性，页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下：$(".carousel").carousel();使用时，在初始化插件的时候可以传关相关的参数.  
实际上，当我们给carousel()方法配置参数之后，轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下：  
.carousel(“cycle”)：从左向右循环播放；  
.carousel(“pause”)：停止循环播放；  
.carousel(“number”)：循环到指定的帧，下标从0开始，类似数组；  
.carousel(“prev”)：返回到上一帧；  
.carousel(“next”)：下一帧

## 输入提示 ##

通过data属性：  
通过添加data属性给页面元素注册输入提示功能。  
  
需要设置autocomplete="off"以阻止浏览器的默认提示菜单遮盖Bootstrap的输入提示下拉菜单。  
通过JavaScript手动调用输入提示：  
$(’.typeahead’).typeahead()

**小结**  
**几乎每种组件都有两种实现方式,一种是属性声明，另外一种是javaScript方式实现**  
bootstrap提供的默认样式往往不能满足我们的需求，从而定制化bootstrap成为我们经常需要做的工作。

## LESS的使用 ##

LESS 是动态的样式表语言，简洁明了的语法定义  
CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情  
LESS 文件

@color: #4D926F; 
     #header { 
      color: @color; 
     } 
     h2 { 
      color: @color; 
     }

经过编译生成的 CSS 文件如下：

#header { 
      color: #4D926F; 
     } 
     h2 { 
      color: #4D926F; 
     }

注：LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，**将 LESS 文件编译生成静态 CSS 文件**，并在 HTML 文档中应用。

## bootstrap之导航栏 ##

## bootstrap之图片自适应 ##

<div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <a href="#">
                            <img src="../image/1.png" class="img-responsive">
                            <h3>xxxx</h3>
                            <P>xxxxx</P>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#">
                            <img src="../image/2.png" class="img-responsive">
                            <h3>xxxx</h3>
                            <P>xxxx</P>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#">
                            <img src="../image/3.png" class="img-responsive">
                            <h3>xxxx</h3>
                            <P>xxxx</P>
                        </a>
                    </div>

## bootstrap之模态框 ##

<div class="modal fade" aria-hidden="true" style="display: none;" data-target="register" id="register">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">x</button>
                        <h4 class="" style="font-size: 40px">register</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <p style="text-align: center;"> <input type="text" class="from-control" placeholder="用户名" name="account">    <span><span style="color: red;">*</span>用户名必须是6-15位的字母或数字</span>
                            </p>
                        </div>
                        <div class="form-group">
                            <p class="col-xs-offset-2"><input type="text" class="from-control" placeholder="密码" name="password">    <span><span style="color: red;">*</span>请输入8-16位字母和数字</span>
                            </p>
                        </div>
                        <div class="form-group">
                            <p class="col-xs-offset-2"><input type="text" class="from-control" placeholder="确认密码" name="password">    <span><span style="color: red;">*</span>请再次确认密码</span>
                            </p>
                        </div>
                        <div class="form-group ">
                            <p class="col-xs-offset-2"><input type="text" class="from-control" placeholder="姓名" name="username">    <span><span style="color: red;"> *</span>姓名必须是中文</span>
                            </p>
                        </div>
                        <div class="form-group">
                            <p class="col-xs-offset-2"><input type="text" class="from-control" placeholder="手机号" name="telphone">    <span><span style="color:red;">*</span>手机号必须是11位数字</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5MzcxMQ_size_16_color_FFFFFF_t_70]: /images/20230208/059746688f3b49e48947be66e65f7999.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5MzcxMQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/eecd25f1811849d1a6c7f127ae38435a.png