会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 128778个问题
WEB前端全系列/第四阶段:BootStrap框架模块/BootStrap4基础 31楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- .card卡片组件(样式)
        卡片是一个灵活的、可扩展的内容窗口,同时可以做出多种展示效果变体。
        .card卡片组件是BootStrap 4新增的一组重要样式,它是一一个灵活的、可扩展的内容器,包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。
        使用按钮组合,可以把一系列按钮编组在一行里,并通过可选的JavaScript插件(方法)赋予按钮单选、复选等强化行为。 -->

        <!-- 下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例,如果.card卡片如果没有定义宽度,将
        自然地填满父元素的全宽-利用这个属性,我们可以轻松的订制各种尺寸的卡片。 -->
        <div class="card" style="width:18rem; ">
            <img class="card-img-top" src="img/container.png" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">some quick example text to build on the card title and make card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>

</body>
</html>

QQ截图20201027122428.png

老师 我这个为什么出不来外面的边框啊 您看看是哪里出问题了


WEB前端全系列/第四阶段:BootStrap框架模块/BootStrap4组件 32楼
WEB前端全系列/第四阶段:BootStrap框架模块/BootStrap4基础 33楼

老师好,在测试tooltips和popovers时候,popover没有弹出,而且在BootStrap样式中没有找到“.tooltip-test”和“.popover-test”这两个样式,倒是有一些关于“.bs-tooltip-*”和“.bs-popover-*”的样式,帮忙指导一下这个没有弹出的问题以及这一套样式的用法,谢谢。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
    Launch static backdrop modal
</button>
<div class="modal" tabindex="-1" id="staticBackdrop" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h5>Popover in a modal</h5>
                <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
                <hr>
                <h5>Tooltips in a modal</h5>
                <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>


WEB前端全系列/第四阶段:BootStrap框架模块/BootStrap4组件 34楼

老师好,测试下拉按钮在点击下拉时会报错,把全部 .js文件都粘贴进去也不行,

试了“https://popper.js.org/”这个上面提供的CDN,引用的时候就报错,不知道怎么解决,帮忙指点一下,谢谢!

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="./BootStrap/bootstrap.min.css">
    <script src="./BootStrap/jquery-1.12.4.min.js"></script>
    <script src="./BootStrap/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>
    <div class="btn-group">
        <button type="button" class="btn btn-danger">Action</button>
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

</body>
</html>

image.png

WEB前端全系列/第四阶段:BootStrap框架模块/BootStrap4组件 35楼

老师,如果整个div高度定下来,里面表格的内容多出来了,我还想不换行,不加滚动条,全部显示,有办法吗?

我在写的时候,发现如果table不定宽度,那td里的内容没办法隐藏,可是我想法是弹性布局,这宽度定下来了,就不是那种分成3列的弹性布局了,这个有办法避免吗?实在不好意思,老师,代码让我整的有点长,麻烦老师了。

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="/hpi/favicon.ico" type="image/x-icon" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>练习</title>
    <script src="static/js/href.js"></script>
    <!-- 框架必须 start -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="static/css/font-awesome.css" />
    <script src="static/js/jquery-2.0.3.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/jquery-ui.min.js"></script>
    <script src="static/js/inspinia.js"></script>
    <!-- 框架必须 end -->
    <!-- 消息提示插件 start -->
    <link rel="stylesheet" href="static/css/toastr/toastr.min.css" />
    <script src="static/js/toastr/toastr.min.js"></script>
    <!-- 消息提示插件 end -->

    <!-- 弹窗插件 strart-->
    <link rel="stylesheet" href="static/css/sweetalert/sweetalert.css" />
    <script src="static/js/sweetalert/sweetalert.min.js"></script>
    <!-- 弹窗插件 end -->
    <!-- 框架必须(需要放到最后) start -->
    <link rel="stylesheet" href="static/css/animate.css" />
    <link rel="stylesheet" href="static/css/style.css" />
    <link rel="stylesheet" href="static/css/theme.css" />
    <!-- 框架必须(需要放到最后) end -->
    <!-- 菜单插件 start -->
    <script src="static/js/metisMenu/jquery.metisMenu.js"></script>
    <!-- 菜单插件 end -->
    <!-- 滚动条插件 start -->
    <script src="static/js/slimscroll/jquery.slimscroll.js"></script>
    <!-- 滚动条插件 end -->
    <!-- Echarts start -->
    <script src="static/js/echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/echarts/dark.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/echarts/chalk.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/js/echarts/walden.js" type="text/javascript" charset="utf-8"></script>
    <!-- Echarts end -->
    <link rel="stylesheet" href="static/css/datatables/datatables.min.css" />
    <script src="static/js/datatables/datatables.min.js"></script>
    <style>
       td{
            color: black;
           font-size:1rem;
        }
       #div{
           display: flex;
       }
      td{
          width: 10px;
          overflow:hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          -webkit-text-overflow:ellipsis;
       }
      #div1{
      flew-grow:1;
      }
       #div2{
           flew-grow:1
       }
       #div3{
            flew-grow:1
        }
       #div1>table{
           width: 400px ;
           table-layout: fixed
       }
      #div1 >table>td{
           width: 20px;
           border: #0e9aef 1px solid;
           overflow:hidden;
           white-space:nowrap;
           text-overflow: ellipsis;
           -webkit-text-overflow: ellipsis;
       }
        @media screen and (min-width:992px) {
            .col-md-4{
                font-size: 0.1rem}
            @media screen and (min-width:768px) and (max-width: 992px) {
                .col-md-4{
                    font-size: 0.1rem;}
       @media screen and (max-width:768px) {
           .col-md-4 {
               font-size: 0.1rem}
       }
    </style>
<body style="border: rosybrown 1px solid;height: 400px">
    <div class="row" id="div" style="border: #0d3349 1px solid">
        <div class="col-md-4 " id="div1" style="height:100%  ;" >
           <table class="table-hover" >
               <thead><tr><td>收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr></thead>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
               <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
        </table>
        </div>
        <div class="col-md-4" id="div2" style="height:100%;border: green 1px solid ">
            <table class="table-hover">
                <thead><tr><td>收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr></thead>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
            </table>
        </div>
        <div class="col-md-4" id="div3" style="height:100%  ;border: blue 1px solid">
            <table class="table-hover">
                <thead><tr><td>收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr></thead>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
                <tr><td>收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册收藏手册</td><td>收藏手册</td><td>收藏手册</td></tr>
            </table>
        </div>
    </div>
    <div id="text">长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字长文字</div>
</body>
</head>
</html>



WEB前端全系列/第四阶段:BootStrap框架模块/BootStrap4基础 37楼

百战程序员微信公众号

百战程序员微信小程序

©2014-2024 百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637