BootScrap详细教程

文章目录

  • 前言
  • 一、BootScrap入门
  • 二、导航
  • 三、栅格系统
  • 四、container
  • 五、面板
  • 六、媒体对象
  • 七、分页
  • 八、图标
  • 九、实现动态效果

前言

BootScrap是别人帮我们写好的CSS样式。如果想要使用BootScrap，需要先下载下来，在页面上引入，编写HTML需要按照其规定来编写，也需要一定的自定制。

一、BootScrap入门

  • 下载地址: https://v3.bootcss.com/，下载BootScrap
    在这里插入图片描述
    在这里插入图片描述

  • 解压

  • 创建一个目录叫做static，再在其下创建img、css、js、plugins(插件)目录，分别保存静态文件

  • 将解压文件装在plugins文件夹中
    在这里插入图片描述

  • 编写HTML文件时可以使用BootSrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 开发版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">

    <!-- 生产版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">

</head>
<body>
    <input type="button" value="提交">
    <input type="button" value="提交" class="btn btn-primary">
    <input type="button" value="提交" class="btn btn-success">
    <input type="button" value="提交" class="btn btn-danger">
    <input type="button" value="提交" class="btn btn-danger btn-xs">
</body>
</html>

二、导航

  • 地址: https://v3.bootcss.com/components/
    在这里插入图片描述
    在这里插入图片描述
  • 复制上面的组件代码，即可达到组件效果
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 开发版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">

    <!-- 生产版本 -->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">

</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <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>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <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>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</body>

</html>
  • 如果有不需要的样式，可以通过F11调试页面，找到原因。然在head的style里覆盖原样式
<style>
    .navbar {
        border-radius: 0;
    }
</style>

三、栅格系统

  • 地址：https://v3.bootcss.com/css/#grid
  • 功能：整体划分为了12格
  • 大致分为四种风格：.col-xs-，.col-sm-，.col-md-，.col-lg-
    在这里插入图片描述
  • 可以分为两种布局：
  • 响应式布局：根据页面的宽度,动态的改变布局。.col-sm- : 750px;.col-md- : 970px;.col-lg- : 1170px
  • 非响应式布局：不动态的改变布局，.col-xs-
<div class="col-xs-2" style="background-color: brown; height: 20px;"></div>
<div class="col-xs-10" style="background-color: green;height: 20px;"></div>
  • 列偏移：col-sm-offset-
  • 实现右移三个栅格的例子：
<div class="col-sm-offset-3 col-sm-2" style="background-color: brown; height: 20px;"></div>
<div class="col-sm-7" style="background-color: green;height: 20px;"></div>

四、container

  • container：左右外边距
  • clearfix解决浮动问题
<div class="container clearfix">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>
  • container-fluid：左右没有外边距
<div class="container-fluid clearfix">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

五、面板

  • 地址: https://v3.bootcss.com/components/#panels
    在这里插入图片描述
  • 可以通过应用实现不同面板
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">我的导航</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">联通</a></li>
                    <li><a href="#">移动</a></li>
                    <li><a href="#">电信</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <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>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <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>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container clearfix">
        <div class="col-sm-9">左边</div>
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
    </div>

</body>

在这里插入图片描述

六、媒体对象

  • 由于官方文档给的示例代码不全,所以可以F12查看源码,复制页面中的样式
    在这里插入图片描述
    在这里插入图片描述
<div class="col-sm-9">
    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                    style="width: 64px; height: 64px;"
                    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                    data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Middle aligned media</h4>
            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
                nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
            <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
    </div>
    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                    style="width: 64px; height: 64px;"
                    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                    data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Middle aligned media</h4>
            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
                nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
            <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
    </div>
    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                    style="width: 64px; height: 64px;"
                    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                    data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Middle aligned media</h4>
            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
                nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
            <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
    </div>
    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                    style="width: 64px; height: 64px;"
                    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODRlYTE3NjE2OSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4NGVhMTc2MTY5Ij48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                    data-holder-rendered="true">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Middle aligned media</h4>
            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum
                nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
            <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
    </div>

在这里插入图片描述

七、分页

  • 链接：https://v3.bootcss.com/components/#pagination
    在这里插入图片描述
<ul class="pagination">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
            </ul>

八、图标

  • 上面的后台管理案例中,Bootstrap提供的图标不是太够用,我们需要一个专业做图标的网站Font Awesome。地址: https://fontawesome.dashgame.com/
    在这里插入图片描述
  • 下载好后,上传至服务器的static/plugins下并解压，引入和BootSrap一样
  • 打开网址：https://fontawesome.dashgame.com/
    在这里插入图片描述
  • 放在.html文件里
    在这里插入图片描述

九、实现动态效果

  • 依赖：JQuery，Javascript
  • JQuery 是 Javascript 的类库
  • 下载JQuery: https://jquery.com/download/，压缩后放在static/js下
    在这里插入图片描述
  • 引入放在body标签中的最下面
<body>
...
    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
</body>
  • BootSrap中Javascript地址: https://v3.bootcss.com/javascript/
  • 可以使用里面的插件
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/468361.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【C语言】空心正方形图案

【C语言】空心正方形图案

思路&#xff1a; 1&#xff0c;两行两列打印* &#xff1a;第一行和最后一行&#xff0c;第一列和最后一列。 2&#xff0c;其他地方打印空格。 代码如下&#xff1a; #include<stdio.h> int main() { int n 0; int i 0; int j 0; while (scanf("…
阅读更多...
【LabVIEW FPGA入门】并行执行

【LabVIEW FPGA入门】并行执行

利用图形化编程的并行特性以及 FPGA 上 LabVIEW 图的真正并行实现&#xff0c;您可以通过将应用程序代码划分为更小的进程来进一步优化执行速度。与整个应用程序在一个循环中运行相比&#xff0c;这使得每个进程能够实现更高的循环速率和更高的应用程序整体执行速率。 …
阅读更多...
除了 ChatGPT，还有哪些好用的AI工具？

除了 ChatGPT，还有哪些好用的AI工具？

0. 前言 OnlyFans 订阅教程移步&#xff1a;【保姆级】2024年最新Onlyfans订阅教程 Midjourney 订阅教程移步&#xff1a; 【一看就会】五分钟完成MidJourney订阅 GPT-4.0 升级教程移步&#xff1a;五分钟开通GPT4.0 如果你需要使用Wildcard开通GPT4、Midjourney或是Onlyfa…
阅读更多...
哪些超声波清洗机值得买？百元内超声波清洗机值得买推荐

哪些超声波清洗机值得买？百元内超声波清洗机值得买推荐

日常生活中&#xff0c;无论是精致的珠宝首饰、眼镜&#xff0c;还是日常使用的化妆刷、剃须刀等&#xff0c;难免会沾染灰尘与污垢&#xff0c;长久下来不仅影响外观&#xff0c;更可能对使用效果造成负面影响。而传统的手工清洁往往既费时又费力&#xff0c;且难以彻底清洁到…
阅读更多...
2024年度最佳大型语言模型(LLMs)汇总

2024年度最佳大型语言模型(LLMs)汇总

大型语言模型(LLMs)是人工智能文本处理的主要类型&#xff0c;也现在最流行的人工智能应用形态。ChatGPT是迄今为止最著名的使用LLM的工具&#xff0c;它由OpenAI的GPT模型的特别调整版本提供动力。但还有许多其他聊天机器人和文本生成器&#xff0c;包括从Google Bard和Anthro…
阅读更多...
机器学习_正则化

机器学习_正则化

文章目录 代价函数 如果我们有非常多的特征&#xff0c;我们通过学习得到的假设可能能够非常好地适应训练集&#xff08;代价函数可能几乎为 0&#xff09;&#xff0c;但是可能会不能推广到新的数据。 下图是一个回归问题的例子&#xff1a; 第一个模型是一个线性模型&#xf…
阅读更多...
Anaconda下载以前的旧版本

Anaconda下载以前的旧版本

由于Anaconda新的版本&#xff0c;可能不太适合我们当前开发&#xff0c;我们需要下载历史版本 访问Anaconda官网的历史版本下载页面: https://repo.anaconda.com/archive/
阅读更多...
PostgreSQL开发与实战（7）多版本并发控制1

PostgreSQL开发与实战（7）多版本并发控制1

作者&#xff1a;太阳 一、 表系统字段几个比较重要概念 1.1 tuple tuple表示表中的数据行&#xff0c;在MySQL中用row表示。 在表数据页中&#xff0c;主要分为普通的数据元祖和TOAST元祖。以下是一个普通数据元祖的结构&#xff0c;主要由三部分组成&#xff1a;HeapTupl…
阅读更多...
如何进行软件安全性测试?CMA、CNAS软件安全测试报告获取

如何进行软件安全性测试?CMA、CNAS软件安全测试报告获取

软件安全性测试是保障软件应用安全的重要手段&#xff0c;通过对软件系统的安全性进行全面评估和检测&#xff0c;以确保软件能够抵御各种潜在的安全威胁和风险。那么如何进行软件安全性测试?CMA、CNAS软件安全测试报告又该如何获取呢? 软件安全性测试是一种基于黑盒测试的方…
阅读更多...
数据可视化-ECharts Html项目实战（3）

数据可视化-ECharts Html项目实战（3）

在之前的文章中&#xff0c;我们学习了如何创建堆积折线图&#xff0c;饼图以及较难的瀑布图并更改图标标题。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 …
阅读更多...
C#类型转换

C#类型转换

C#类型转换 隐式类型转换 类型转换从根本上说是类型铸造&#xff0c;或者说是把数据从一种类型转换为另一种类型。在 C# 中&#xff0c;类型铸造有两种形式&#xff1a; 隐式类型转换 - 这些转换是 C# 默认的以安全方式进行的转换, 不会导致数据丢失。例如&#xff0c;从小的…
阅读更多...
深入理解与实践AB测试：从理论到实战案例解析

深入理解与实践AB测试：从理论到实战案例解析

一、引言 在互联网产品优化和运营策略制定中&#xff0c;AB测试&#xff08;也称为分组测试或随机化对照实验&#xff09;是一种科学且严谨的方法。它通过将用户群体随机分配至不同的实验组&#xff08;通常是A组和B组&#xff09;&#xff0c;对比不同版本的产品或策略对关键…
阅读更多...
CMake+vcpkg+VS2022配置github上的cmake开源项目外部库

CMake+vcpkg+VS2022配置github上的cmake开源项目外部库

我们以采用 GitHub 上的开源库 cuda-bundle-adjustment 为例&#xff0c;其不能直接用vcpkg进行安装&#xff0c;只能通过cmake编译后链接到VS2022。 将 cuda-bundle-adjustment 库通过 CMake 编译链接到 Visual Studio 2022 步骤操作&#xff1a; 克隆存储库&#xff1a;使用…
阅读更多...
【实验01 扩展实验】C#桌面项目：简易计算器

【实验01 扩展实验】C#桌面项目：简易计算器

【实验要求】 &#xff08;1&#xff09;新建一个C#桌面项目Calc&#xff0c;实现简易计算器功能&#xff0c;界面如图1所示。 &#xff08;2&#xff09;计算方式&#xff1a;通过点击对应的按钮&#xff0c;输入第1个数&#xff08;可以是整数或实数&#xff09;&#xff0c…
阅读更多...
呵护地球不止一小时 食品行业如何为地球减负

呵护地球不止一小时 食品行业如何为地球减负

“关爱地球,熄灯一小时”。作为全世界规模最大的应对气候变化行动之一,“地球一小时”自2007年进入中国以来,一直广受关注,社会各界竞相支持并参与。2024年,该活动以“为地球献出一小时”为主题,呼吁社会各界以实际行动为地球减负。 作为与大众日常生活息息相关的食品企业该如何…
阅读更多...
【C++】堆区空间的申请和释放--- 2024.3.19

【C++】堆区空间的申请和释放--- 2024.3.19

目录 C和C的区别&#xff08;申请堆区空间&#xff09;C中的new和delete结束语 C和C的区别&#xff08;申请堆区空间&#xff09; 在c语言中&#xff0c;在遇到需要申请一块堆区空间时&#xff0c;我们往往会使用malloc申请&#xff0c;使用free进行释放&#xff0c;但是为什么…
阅读更多...
BUUCTF-Ezsql1

BUUCTF-Ezsql1

1.打开靶机 打开第一个链接 2.万能密码 使用万能密码&#xff1a;a or 1 # 密码为随意 第二个用kali打开 3.ssh连接靶机 ssh ctf284490d0-7600-4c65-9160-5ced02f45633.node5.buuoj.cn -p 28191 由题可知密码为123456 4.找到并修改index.php文件 找到index.php文件 #内容如…
阅读更多...
Trait与生命周期

Trait与生命周期

原文链接&#xff1a;(*∇&#xff40;*) 咦,又好了~ Rust – xiaocr_bloghttp://www.xiaocr.fun/index.php/2024/03/18/trait%E4%B8%8E%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/ 目录 Trait 定义trait 默认实现 trait作为参数 Trait Bound语法 通过指定多个 trait bound …
阅读更多...
【C++】内存管理和模板基础（new、delete、类及函数模板）

【C++】内存管理和模板基础（new、delete、类及函数模板）

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;http://t.csdnimg.cn/eCa5z 目录 内存分布 C内存管理方式 new/delete操作内置类型 new和delete操作自定义类型 operator new与operator d…
阅读更多...
Cesium：绘制一个 3DTiles 对象的外包盒顶点

Cesium：绘制一个 3DTiles 对象的外包盒顶点

作者：CSDN @ _乐多_ 本文将介绍如何使用 Cesium 引擎根据模型的中心坐标，半轴信息，绘制一个 3DTiles 对象的外包盒顶点。 外包盒是一个定向包围盒（Oriented Bounding Box），它由一个中心点（center）和一个包含半轴（halfAxes）组成。半轴由一个3x3的矩阵表示，这个矩阵…
阅读更多...
最新文章

Copyright @ 2022~2023