BootScrap详细教程

news2024/11/15 21:56:33

文章目录

  • 前言
  • 一、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/
  • 可以使用里面的插件
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

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

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

【实验要求】 &#xff08;1&#xff09;新建一个C#桌面项目Calc&#xff0c;实现简易计算器功能&#xff0c;界面如图1所示。 &#xff08;2&#xff09;计算方式&#xff1a;通过点击对应的按钮&#xff0c;输入第1个数&#xff08;可以是整数或实数&#xff09;&#xff0c…
阅读更多...
配置LVS NAT模式

配置LVS NAT模式

配置LVS NAT模式 环境准备 client1&#xff1a;eth0->192.168.88.10&#xff0c;网关192.168.88.5lvs1: eth0 -> 192.168.88.5&#xff1b;eth1->192.168.99.5web1&#xff1a;eth1->192.168.99.100&#xff1b;网关192.168.99.5web2&#xff1a;eth1->192.168…
阅读更多...
【推荐】免费AI论文写作-「智元兔 AI」

【推荐】免费AI论文写作-「智元兔 AI」

还在为写论文焦虑&#xff1f;免费AI写作大师来帮你三步搞定&#xff01; 智元兔AI是ChatGPT的人工智能助手&#xff0c;并且具有出色的论文写作能力。它能够根据用户提供的题目或要求&#xff0c;自动生成高质量的论文。 不论是论文、毕业论文、散文、科普文章、新闻稿件&…
阅读更多...
内置泵电源，热保护电路等功能的场扫描电路D78040，偏转电流可达1.7Ap-p，可用于中小型显示器。

内置泵电源，热保护电路等功能的场扫描电路D78040，偏转电流可达1.7Ap-p，可用于中小型显示器。

D78040是一款场扫描电路&#xff0c;偏转电流可达1.7Ap-p&#xff0c;可用于中小型显示器。 二 特 点 1、有内置泵电源 2、垂直输出电路 3、热保护电路 4、偏转电流可达1.7Ap-p 三 基本参数 四 应用电路图 1、应用线路 2、PIN5脚输出波形如下&#xff1a;
阅读更多...
顶顶通呼叫中心中间件-群集配置方法讲解(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件-群集配置方法讲解(mod_cti基于FreeSWITCH)

群集介绍 比较多的外呼或呼入系统&#xff0c;假如整个系统需要1万并发&#xff0c;单机最高就3000-5000并发&#xff0c;这时就需要多机群集了。顶顶通呼叫中心中间件使用redis数据库&#xff0c;多个FreeSWITHC(mod_cti)连接同一个redis就可以很容易的配置成群集系统。 想了…
阅读更多...
java Flink（四十二）Flink的序列化以及TypeInformation介绍（源码分析）

java Flink（四十二）Flink的序列化以及TypeInformation介绍（源码分析）

Flink的TypeInformation以及序列化 TypeInformation主要作用是为了在 Flink系统内有效地对数据结构类型进行管理&#xff0c;能够在分布式计算过程中对数据的类型进行管理和推断。同时基于对数据的类型信息管理&#xff0c;Flink内部对数据存储也进行了相应的性能优化。 Flin…
阅读更多...
【DL经典回顾】激活函数大汇总（二十一）（BReLU附代码和详细公式）

【DL经典回顾】激活函数大汇总（二十一）（BReLU附代码和详细公式）

激活函数大汇总&#xff08;二十一&#xff09;&#xff08;BReLU附代码和详细公式&#xff09; 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里&#xff0c;激活函数扮演着不可或缺的角色…
阅读更多...
深度学习面经-part3(RNN、LSTM）

深度学习面经-part3(RNN、LSTM）

3.RNN 核心思想&#xff1a;像人一样拥有记忆能力。用以往的记忆和当前的输入&#xff0c;生成输出。 RNN 和 传统神经网络 最大的区别:在于每次都会将前一次的输出结果&#xff0c;带到下一次的隐藏层中&#xff0c;一起训练。 RNN应用场景: 1.文本生成 2.语音识别 3.机器翻…
阅读更多...
【DataWhale学习笔记-蝴蝶书共读】大语言模型背后

【DataWhale学习笔记-蝴蝶书共读】大语言模型背后

从图灵测试到ChatGPT 1950年&#xff0c;艾伦•图灵(Alan Turing)发表论文《计算机器与智能》&#xff08; Computing Machinery and Intelligence&#xff09;&#xff0c;提出并尝试回答“机器能否思考”这一关键问题。在论文中&#xff0c;图灵提出了“模仿游戏”&#xff…
阅读更多...
RabbitMQ介绍及搭建

RabbitMQ介绍及搭建

架构 RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff09;的开源消息代理软件&#xff0c;使用erlang语言编写&#xff0c;依赖Erlang环境运行。 Broker&#xff1a;运行消息队列服务进程的节点&#xff0c;包含Exchange、Queue&#xff1b; Producer&#xff1a;消…
阅读更多...
自学Python第二十九天-feapder框架创建爬虫

自学Python第二十九天-feapder框架创建爬虫

自学Python第二十九天-feapder框架创建爬虫 安装feapder 的设计架构feapder 框架的简单使用简单创建爬虫简单爬取数据简单的数据保存 中间件校验浏览器渲染使用浏览器渲染获取接口数据 feapder是一款上手简单&#xff0c;功能强大的 Python爬虫框架&#xff0c;内置 AirSpide…
阅读更多...
Games101笔记-模型、视图、投影

Games101笔记-模型、视图、投影

在旋转点&#xff0c;旋转矩阵的逆等于矩阵的转置 视图变换和投影变换 三维变换 左边3*3是线性变换&#xff0c;右边一列是仿射变换(平移) 先线性再平移 缩放、旋转、平移 x叉乘y得到z&#xff0c;y叉乘z得到x&#xff0c; xyz给任何两个可以得到另一个 (循环对称) z叉乘x得…
阅读更多...
EDI在汽车主机厂配送流程中的应用

EDI在汽车主机厂配送流程中的应用

汽车主机厂的汽车配送流程始于汽车 “生产结束 ” &#xff0c;止于 “交付给经销商 ” 。在这个流程中&#xff0c;企业作为主机厂的下游供应商&#xff0c;与主机厂的物流服务供应商之间的信息交换将会变得十分重要。 配送流程&#xff1a;运输订单以及报告 汽车主机厂提供预…
阅读更多...
6-高维空间：机器如何面对越来越复杂的问题

6-高维空间：机器如何面对越来越复杂的问题

声明 本文章基于哔哩哔哩付费课程《小白也能听懂的人工智能原理》。仅供学习记录、分享&#xff0c;严禁他用&#xff01;&#xff01;如有侵权&#xff0c;请联系删除 目录 一、知识引入 &#xff08;一&#xff09;二维输入数据 &#xff08;二&#xff09;数据特征维度 …
阅读更多...
Java-JVM 虚拟机原理调优实战

Java-JVM 虚拟机原理调优实战

一、基础 栈帧&#xff08;Stack Frame&#xff09;栈空间的 基本元素&#xff0c;用于 方法的调用和方法的执行的数据结构 堆内存用来存放由new创建的对象和数组。在堆中分配的内存&#xff0c;由Java虚拟机的自动垃圾回收器来管理。在堆中产生了一个数组或对象后&#xff0c…
阅读更多...
小白向-使用git实现不同服务器改动的同步

小白向-使用git实现不同服务器改动的同步

背景 深度学习项目&#xff0c;已有可运行的backbone&#xff0c;已将此项目在github建库。 需要使用不同分支进行不同改动的测试&#xff1b;有两台服务器可供程序运行&#xff1b; 项目需求 以github云端仓库为媒介&#xff0c;实现不同服务器改动无痛关联。维护项目代码…
阅读更多...
MS14_064 漏洞利用与安全加固

MS14_064 漏洞利用与安全加固

文章目录 环境说明1 MS14_064 简介2 MS14_064 复现过程3 MS14_064 安全加固 环境说明 渗透机操作系统&#xff1a;kali-linux-2024.1-installer-amd64漏洞复现操作系统: sc_winxp_pro_with_sp2 1 MS14_064 简介 要利用此漏洞则需要进行用户交互。通过发送电子邮件信息给本地登…
阅读更多...
【云开发笔记No.4】DevOps的起源，定义和基本原则

【云开发笔记No.4】DevOps的起源，定义和基本原则

DevOps&#xff0c;作为一组过程、方法与系统的统称&#xff0c;它的出现并不是偶然的&#xff0c;而是源于软件开发与运维领域长期以来所面临的挑战和痛点。其诞生背景可以追溯到敏捷开发模式的兴起以及持续开发所带来的运维问题。随着软件行业的飞速发展&#xff0c;传统的软…
阅读更多...
Godot 学习笔记(3):IOC容器注入，以NlogServices为例

Godot 学习笔记(3):IOC容器注入，以NlogServices为例

文章目录 前言环境注意事项Ioc注入文件夹设置Service服务搭建Nlog.configNlogService配置ButtonTest1Service控制反转Program主入口ButtonTest1从Ioc中获取服务 输出生命周期问题 总结 前言 Godot.Net中使用IOC之后&#xff0c;Godot的代码将会被极大的解耦。这里不不展开说明…
阅读更多...
【大模型】直接在VS Code(Visual Studio Code)上安装CodeGeeX插件的过程

【大模型】直接在VS Code(Visual Studio Code)上安装CodeGeeX插件的过程

文章目录 一、什么是CodeGeeX&#xff08;一&#xff09;我理解的CodeGeeX&#xff08;二&#xff09;优缺点 二、CodeGeex下载、安装、注册&#xff08;一&#xff09;安装VS Code(Visual Studio Code)&#xff08;二&#xff09;下载安装CodeGeeX&#xff08;三&#xff09;注…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023