bootstrap学习笔记03-组件

落日映苍穹つ 2024-04-19 11:31 63阅读 0赞

一、什么是组件

组件就是对特定功能的封装。

二、常用组件

1.警告提示框

详情[请点击][Link 1]

代码示例：

<div class="alert alert-success" role="alert">
    不可关闭的提示框
    </div>
    
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      可关闭的提示框
      <button type="button" class="close" data-dismiss="alert">
        <span>×</span>
      </button>
    </div>

页面显示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70][]

2.按钮及按钮组组件

1）按钮组件

详情[请点击][Link 2]

代码示例：

<button class="btn btn-success">我是按钮</button>
    <input type="button" class="btn btn-danger" value="我是按钮">
    <a class="btn btn-primary">我是按钮组</a>

页面显示：

![20190917203141670.png][]

2）按钮组组件

详情[请点击][Link 3]

代码示例：

3）卡片组件

详情[请点击][Link 4]

代码示例：

页面实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 1][]

4.轮播图

详情[请点击][Link 5]

代码示例：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
        
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="1.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="3.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
        
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
        
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    
    <script>
    $('.carousel').carousel({
      interval: 1000
    })
    </script>

5.折叠面板

详情[请点击][Link 6]

代码示例：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
    按钮
    </button>
    
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        我是折叠面板的内容
      </div>
    </div>

6.下拉菜单

详情[请点击][Link 7]

注意此处有一个坑，popper.js引入必须在jquery-3.1.1.js之前，如下所示

代码示例

<div class="dropdown">
        
      <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
        按钮
      </button>
        
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>

7.模态弹窗

详情[请点击][Link 8]

代码示例：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
      提交
    </button>
    
    
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" >
        
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            
          <div class="modal-header">
              
            <h5 class="modal-title" id="exampleModalCenterTitle">确认弹窗</h5>
              
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
            <br>
            
          <div class="modal-body">
            确认提交吗？
          </div>
            
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary">确认</button>
          </div>
        </div>
      </div>
    </div>

页面显示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 2][]

8.提示气泡

1）提示冒泡：鼠标悬浮按钮处，弹出提示

详情[请点击][Link 9]

代码示例：

<div style="margin: 200px">
        
        <button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="财务审核通过，才可以提交。">
            提交
        </button>
    </div>
    <script>
        $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
    </script>

页面显示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 3][]

2）pop提示：鼠标点击按钮处，弹出提示。再次点击，弹框关闭

详情[请点击][Link 10]

<div style="margin: 200px">
        
        <button class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
          Popover on top
        </button>
    </div>
    
    <script>
        $(function () {
      $('[data-toggle="popover"]').popover()
    })
    </script>

9.导航栏

详情[请点击][Link 11]

代码示例：

<nav class="navbar navbar-expand-xl navbar-light bg-success">
        
        <a class="navbar-brand" href="#">知播渔</a>
        
        <button class="navbar-toggler"  data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>
    </nav>

[Link 1]: http://code.z01.com/v4/components/alerts.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/002d837339b245798b4defabc0741d46.png
[Link 2]: http://code.z01.com/v4/components/buttons.html
[20190917203141670.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/97d06cbc47054245a4b5e5895a17a26f.png
[Link 3]: http://code.z01.com/v4/components/button-group.html
[Link 4]: http://code.z01.com/v4/components/card.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/bc78bcc9294e444eba5d1168578e9d87.png
[Link 5]: http://code.z01.com/v4/components/carousel.html
[Link 6]: http://code.z01.com/v4/components/collapse.html
[Link 7]: http://code.z01.com/v4/components/dropdowns.html
[Link 8]: http://code.z01.com/v4/components/modal.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/391646c976854d38a6f92686915d662b.png
[Link 9]: http://code.z01.com/v4/components/tooltips.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvdWxpaGFuZw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ae84cc6eeb3344828044e0d713193000.png
[Link 10]: http://code.z01.com/v4/components/popovers.html
[Link 11]: http://code.z01.com/v4/components/navbar.html?