精华内容
下载资源
问答
我要提问
  • bootstrap框架综合案例（3）
    2021-06-17 10:56:40 
    <!DOCTYPE html>
<html>

<head>
    <title>第一题--bootstrap</title>
    <meta charset="utf-8">
    <!-- （1）设置 viewport meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <!-- （2）引入样式 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- （3）-（5）引入js文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 轮播图组件 -->
    <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <!-- 轮播图项目 -->
            <div class="carousel-item active">
                <img src="img/img_fjords_wide.jpg">
                <!-- 轮播图文字描述 -->
                <div class="carousel-caption">
                    <h3>第一张图片描述标题</h3>
                    <p>描述文字!</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/img_nature_wide.jpg">
                <div class="carousel-caption">
                    <h3>第二张图片描述标题</h3>
                    <p>描述文字!</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="img/img_mountains_wide.jpg">
                <div class="carousel-caption">
                    <h3>第三张图片描述标题</h3>
                    <p>描述文字!</p>
                </div>
            </div>
        </div>

        <!-- 轮播导航 -->
        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

    </div>

</body>

</html>
    更多相关内容

  • bootstrap框架综合案例（5）

     2021-06-17 11:45:05
    <!... <... <head>...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-...-- 导入css文件夹中bootstrap.min.css基础样式文件 --> <link rel="stylesheet" type="text/ 
    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 导入css文件夹中bootstrap.min.css基础样式文件 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Web技术社区</title>
</head>

<body>
    <!-- 页头 -->
    <!-- 响应式导航栏 -->

    <!-- 使用 .navbar 类来创建一个标准的导航栏，后面紧跟: 
    .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)
    导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 
    .nav-item 类， <a> 元素上使用 .nav-link 类 -->

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a href="#">Web技术社区</a>
        <!-- 折叠导航栏 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler">
            <span></span>
        </button>
        <div class="collapse navbar-collapse" id="navToggler">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a href="#">首页</a>
                </li>
                <!-- 下拉菜单 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Bootstrap</a>
                    <div>
                        <a href="#">布局</a>
                        <a href="#">组件</a>
                        <a href="#">插件</a>
                    </div>
                </li>
                <li>
                    <a href="#">PHP</a>
                </li>
                <li>
                    <a href="#">MySQL</a>
                </li>
                <li>
                    <a href="#">Laravel</a>
                </li>
            </ul>
        </div>
    </nav>

    <div id="introduction">
        <div id="content">
            <h2>欢迎来到Web技术社区</h2>
            <p>本站包括Bootstrap、PHP、MySQL、Laravel等Web技术教程</p>
        </div>
    </div>

    <!-- 栅格系统 -->
    <!-- 最外层容器100%宽度-->
    <div class="contanier-fluid">
        <!-- 行 -->
        <div>
            <!--第一张图片和标题-->
            <!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
            <div class="col-lg-3 col-6">
                <div>
                    <img src="img/bootstrap.png">
                    <div>
                        <p>Bootstrap</p>
                    </div>
                </div>
            </div>
            <!--第二张图片和标题-->
            <!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
            <div class="col-lg-3 col-6">
                <div>
                    <img src="img/php.png">
                    <div>
                        <p>PHP</p>
                    </div>
                </div>
            </div>
            <!--第三张图片和标题-->
            <!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
            <div class="col-lg-3 col-6">
                <div>
                    <img src="img/mysql.png">
                    <div>
                        <p>MySQL</p>
                    </div>
                </div>
            </div>
            <!--第四张图片和标题-->
            <!-- 屏幕宽度≧992px时显示四列，屏幕宽度<576px时显示两列 -->
            <div class="col-lg-3 col-6">
                <div>
                    <img src="img/laravel.png">
                    <div>
                        <p>Laravel</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 导入js文件夹里的jquery-3.2.1.min.js文件和bootstrap.min.js文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

    body {
    font-size: 20px;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
}

.navbar {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 99;
}

.brand {
    color: white;
    /* 盒模型 */
    /* 边框1px，白色，实线 */
    border: 1px solid #fff;
    /* 内边距5px */
    padding: 5px;
    /* 外边距5px */
    margin: 5px;
}

.brand:hover {
    color: white;
    text-decoration: none;
}

#introduction {
    /* 背景从上到下颜色渐变 */
    background: linear-gradient(to bottom, black, white);
    width: 100%;
    height: 400px;
    /* 字体颜色 */
    color: rgba(255, 255, 255, 0.9);
}

#content {
    position: absolute;
    top: 16%;
    left: 16%;
    width: 68%;
    text-align: center;
}

#content h2:hover {
    font-size:2.25(rem);
    /* 设置字体大小为根元素大小的2.25倍 */
    transition: font-size 1s;
    /* 使用过渡，1s内标题字号变大 */
}

.card {
    margin: 10px;
    box-shadow: 1px 1px 5px black;
    /* 盒阴影 */
    text-align: center;
    align-items: center;
}

.card-img-top {
    margin-top: 10px;
    width: 60%;
}

.card-text {
    text-align: center;
}
    收起
    展开全文

  • bootstrap框架实例大全

     2018-10-16 18:11:15
    包含bootstrap完整的组件参考实例,让你的网页开发更快速!
    收起

  • 10个Bootstrap热门的前端框架网站案例.docx

     2021-10-24 18:49:27
    10个Bootstrap热门的前端框架网站案例.docx
    收起

  • bootstrap框架综合案例（1）

     2021-06-17 10:27:55
    initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> head> <body> ... 
    <!DOCTYPE html>
<html>

<head>
    <title>callio</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <!-- 头部 -->
    <div class="contanier">
        <!-- 垂直居中 -->
        <div class="row justify-content-between">
            <a class="navbar-brand">
                <img src="img/logo.png">
            </a>
            <!-- 标题高亮 -->
            <nav class="navbar navbar-expand-lg navbar-light">
                <!-- 折叠菜单 -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target='#navToggler'>
				<span class="navbar-toggler-icon"></span>
			</button>
                <div class="collapse navbar-collapse" id="navToggler">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link active">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">HTML/CSS</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">HTML</a>
                                <a class="dropdown-item" href="#">CSS</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">HTML5</a>
                                <a class="dropdown-item" href="#">CSS3</a>
                            </div>

                        </li>
                        <li class="nav-item">
                            <a class="nav-link">JAVASCRIPT</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link">JQUERY</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

    <!-- 轮播图 -->
    <div id="" class="carousel slide carousel-scale" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/banner1.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="img/banner2.jpg" class="d-block w-100" alt="...">
            </div>
        </div>
    </div>

    <!-- 列表展示 -->

    <section class="list">
        <div class="container">
            <div class="row">
                <div class="col-md-4 clo-sm-6 col-12">
                    <!--中屏以上显示3列，小屏显示2列，最小屏显示1列 -->
                    <div class="item">
                        <div class="thumb">
                            <img src="img/service01.jpg">
                        </div>
                        <h2>HTML</h2>
                        <p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
                        <a href="">更多</a>
                    </div>
                </div>
                <div class="col-md-4 clo-sm-6 col-12">
                    <div class="item">
                        <div class="thumb">
                            <img src="img/service02.jpg">
                        </div>
                        <h2>JAVASCRIPT</h2>
                        <p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
                        <a href="">更多</a>
                    </div>
                </div>
                <div class="col-md-4 clo-sm-6 col-12">
                    <div class="item">
                        <div class="thumb">
                            <img src="img/service03.jpg">
                        </div>
                        <h2>MYSQL</h2>
                        <p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
                        <a href="">更多</a>
                    </div>
                </div>
                <div class="col-md-4 clo-sm-6 col-12">
                    <div class="item">
                        <div class="thumb">
                            <img src="img/service04.jpg">
                        </div>
                        <h2>ES6</h2>
                        <p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
                        <a href="">更多</a>
                    </div>
                </div>
                <div class="col-md-4 clo-sm-6 col-12">
                    <div class="item">
                        <div class="thumb">
                            <img src="img/service05.jpg">
                        </div>
                        <h2>PHP</h2>
                        <p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
                        <a href="">更多</a>
                    </div>
                </div>
                <div class="col-md-4 clo-sm-6 col-12">
                    <div class="item">
                        <div class="thumb">
                            <img src="img/service05.jpg">
                        </div>
                        <h2>VUE</h2>
                        <p>Lorem ipsum dolor sit amet, habitasse sollicitudin adipiscing nemo</p>
                        <a href="">更多</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="message">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 d-flex align-items-center description">
                    <!-- 以下内容要垂直对齐-->
                    <div class="row">
                        <h2 class="col-12">web前端</h2>
                        <p class="col-12">Web前端在IT行业真正受到重视大概也就六七年的时间。随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，所以，有不少人立志要成为前端开发工程师，但同时又担心Web前端开发到底还能热多久。</p>
                    </div>
                </div>
                <div class="col-12 col-md-6 form">
                    <h2>
                        <span>Service Form</span> Get Your Service
                    </h2>
                    <form>
                        <div class="form-group">
                            <!-- 表单控件组件 -->
                            <input type="text" class="form-control" placeholder="输入用户名">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="输入用户名">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="输入用户名">
                        </div>
                        <div class="form-group">
                            <select id="inputState" class="form-control">
					        <option selected>html</option>
					        <option>css</option>
					      </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="form-control btn btn-primary">Sign in</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <footer class="container-fruild bottom">
        版权
    </footer>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>

</html>

    .carousel-scale .carousel-item img {
    transform: scale(1.12);
    /*放大到1.12倍*/
}

.carousel-scale .carousel-item.active img {
    animation: scaleUpDown 1s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940);
    /*让动画保持最终状态*/
}

@keyframes scaleUpDown {
    from {
        transform: scale(1.12);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.list {
    margin-top: 2rem;
}

.list .item {
    margin: 20px 10px;
    padding-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 20px;
    /*设置边框圆角，四个角都是20px*/
}

.list .item .thumb {
    overflow: hidden;
    margin-bottom: 1rem;
}

.list .item .thumb img {
    width: 100%;
    transition: all .8s;
}

.list .item:hover .thumb img {
    transform: scale(1.2);
}

.list .item h2,
.list .item p,
.list .item a {
    padding: 0 2rem;
}

.message {
    padding: 3rem 0;
    border-top: 1px solid #ccc;
}

.message .form {
    border: 1px solid #ccc;
    padding: 20px 30px;
    border-radius: 10px;
    background-color: #eee;
}

.message .form h2 {
    padding: 20px 0;
    text-align: center;
}

.message .form h2 span {
    display: block;
    font-size: 18px;
    font-weight: normal;
}

.description h2 {
    text-align: center;
    line-height: 70px;
}

.description p {
    line-height: 28px;
    text-indent: 2em;
    /* 文字首页缩进 */
}

.bottom {
    height: 6rem;
    line-height: 6rem;
    text-align: center;
    background-color: #333;
    color: #fff;
}
    收起
    展开全文

  • bootstrap框架综合案例（2）

     2021-06-17 10:38:31
    <!DOCTYPE html> <html> <head> <...Bootstrap 4<...meta name="viewport" content="width=device-width, initial-scale=1">...link rel="stylesheet" href="css/bootstrap.mi 
    <!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 4</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="js/popper.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 在（1）处添加巨幕类  -->
    <div class="Jumbotron text-center" style="margin-bottom:0">
        <h1>简洁、直观、强悍的前端开发框架。</h1>
        <p>Bootstrap让web开发更迅速、简单</p>
    </div>
    <!-- 在（2）处添加导航栏类  -->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- 在（3）处添加高亮显示品牌类  -->
        <a class="navbar-brand" href="#">LOGO</a>
        <!-- 在（4）（5）（6）分别添加类，点击button实现折叠导航菜单  -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span></span>
        </button>
        <!-- 在（7）处添加类，是所在div包裹导航内容  -->
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul>
                <li>
                    <a href="#">php</a>
                </li>
                <li>
                    <a href="#">H5和css3</a>
                </li>
                <li>
                    <a href="#">js和jquery</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 在（8）处添加固定宽度容器类  -->
    <div class="container" style="margin-top:30px">
        <!-- 在（9）处添加行类  -->
        <div class="row">
            <!-- 在（10）在平板设备上或者屏幕宽度在567px和768px之间的设备上显示为4个栅格  -->
            <div class="col-sm-4">
                <h2>前端响应式框架</h2>
                <h5>logo:</h5>
                <div>
                    图像
                </div>
                <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                <h3><a href="# # #">bootstrap网站</a></h3>
                <p>常用网站</p>
                <ul class="nav nav-pills flex-column">
                    <li>
                        <!-- 在（11）处添加类，设置a标签处于激活状态  -->
                        <a class="nav-link active" href="#">官网</a>
                    </li>
                    <li>
                        <a href="#">百度</a>
                    </li>
                    <li>
                        <a href="#">新浪</a>
                    </li>
                    <li>
                        <!-- 在（12）处添加类，设置a标签处于不可用状态  -->
                        <a class="nav-link disabled" href="#">google</a>
                    </li>
                </ul>
                <hr>
            </div>
            <!-- 在（13）处添加类，在平板设备上或者屏幕宽度在567px和768px之间的设备上显示为8个栅格  -->
            <div class="col-sm-8">
                <h2>html5是html开发的新的标准</h2>
                <h5>关于html5的介绍</h5>
                <div>图像</div>
                <p>HTML5 是下一代的 HTML</p>
                <p>
                    什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
                </p>
            </div>
        </div>
    </div>
</body>

</html>
    收起
    展开全文

  • Bootstrap部分案例

     千次阅读 2022-04-01 19:37:31
    主要用于组件：轮播-Carousel代码如下效果如下主要用于组件：列表组-List group代码如下效果如下 ​页面内容需要...表单-Forms代码如下效果如下Bootstrap文档：简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
    收起
    java

  • bootstrap案例练习-仿星巴克

     2020-10-11 10:31:24
    我在学习bootstrap响应式开发的一个练习案例，用到了bootstrap的栅格系统和轮播组件、card组件、button组件 导航栏组件 image工具
    收起

  • BootStrap项目案例

     2018-12-21 15:05:07
    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的css前端框架，这是一个示例
    收起

  • 黑马程序员----基于BootStrap框架的网页制作综合案例

     千次阅读 多人点赞 2021-06-20 13:16:25
    网页制作综合案例完整源码:效果演示: 完整源码: <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
    收起

  • bootstrap经典案例

     2018-10-27 09:46:29
    Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松...
    收起

  • Bootstrap框架

     2021-05-07 16:20:03
    Bootstrap简介 Bootstrap能做什么 Bootstrap时候最受欢迎的HTML，CSS和JS框架，用于开发响应式布局，移动设备优先的WEB项目
    收起

  • bootstrap框架综合案例（4）

     2021-06-17 11:07:30
    <!DOCTYPE html> <html> <head> <title>...meta name="viewport" content="width=device-width, initial-scale=1">...link rel="stylesheet" href="./css/bootstrap.min.c
    收起

  • Bootstrap框架结合jQuery仿百度换肤功能实例解析

     2020-11-23 06:22:35
    在设计界面的过程当中，我采用了Bootstrap框架，以便更好的适应屏幕。（当然也是为了更好的熟悉使用这个框架，大家别忘了把Bootstrap框架的css和js包引进来哦）。在创建项目时最好可以分别将css、js、images分开。 ...
    收起

  • bootstrap-notifications, Bootstrap 框架的通知组件.zip

     2019-10-10 03:03:06
    bootstrap-notifications, Bootstrap 框架的通知组件 用于 3的 通知组件 要开始，请查看 http://skywalkapps.github.io/bootstrap-notifications 。快速启动通知组件是为 Bootstrap 3构建的。 你有以下安装选项：...
    收起

  • BootStrap案例.zip

     2020-03-31 22:26:52
    鄙人花了一个月的时间才完成了这个网站，这个网站采用HTML、CSS、JavaScript、jQuery、以及BootStrap框架技术完成的，由于我是采用了BootStrap框架技术所以该网站能适应一切设备下不同分辨率的屏幕下进行浏览，由于...
    收起

  • bootstrap框架的下载及应用

     2022-01-09 20:00:48
    如创建导航和文本等样式，我们都可以调用bootstrap中的类名来帮助我们快速完成，总之bootstrap是一款轻量级的专门为移动端的响应式布局而开发的框架。 css的内容就介绍到这里，下期我们给大家介绍js的使用。
    收起
    css css3

  • java web笔记之BootStrap框架

     2022-04-02 20:02:31
    BootStrap它是一个响应式设计,自动适应各个屏幕并且容易上手的前端开发框架 二. 使用方法 首先引入jQuery库 再引入bootstrap的js库 还要引入bootstrap的css库 下面是官方的帮助文档链接 bootstrap-5.0.2中文帮助...
    收起
    javascript html

  • bootstrap框架之表单

     2021-06-17 22:24:33
    基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式 1）向父 <form> 元素添加 role="form" 2）把标签和控件放在一个带有form-group 类的<div> 中，这是获取最佳间距所必需的。 3）...
    收起

  • ssm-crud:SSM + Maven + BootStrap 整合案例

     2021-05-19 10:16:04
    前端框架 - bootstrap快速搭建简洁美观的界面 项目的依赖管理 - Maven 分页 - pagehelper 逆向工程 - MyBatis Generator 二、环境搭建： 创建一个maven工程 引入项目依赖的jar包 spring springmvc mybatis 数据库...
    收起
    Java

  • BootStrap框架模块:BootStrap4实战

     2022-01-14 10:06:58
    BootStrap4实战 微票儿 (opens new window)本项目是由BootStrap3升级到BootStrap4，笔者心得是，如果没有必须要求，最好不要升级。如果是新项目在3和4之间做选择。建议使用4版本。 1.1 项目实战一 全局公共CSS文件 /...
    收起
    css html

  • Bootstrap框架建立树形菜单(Tree)的实例代码

     2020-08-29 00:19:35
    主要介绍了在Bootstrap框架下怎么去建立一个树形菜单，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
    收起

  • 阿里百秀首页案例（Bootstrap框架）

     2021-05-11 14:02:49
    技术：bootstrap框架 设计图： 本设计图采用 1280px 设计尺寸 案例：需求分析 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的。 因此我们列 定义为 col-md- 就可以了， ...
    收起

  • WEB前端框架应用（Bootstrap）课程设计

     2020-03-07 14:59:35
    利用CSS样式和栅格系统进行布局，并且利用Bootstrap框架中的CSS组件和JavaScript插件丰富页面，增加页面的美观和互动，本项目写的是一个房屋装修的网站，有四个网页
    收起

  • bootstrap框架基础知识点整理

     千次阅读 多人点赞 2021-06-18 19:53:25
    bootstrap框架基本模板及代码注释视口设置布局容器布局容器之container布局容器2---container-fluid栅格系统栅格系统的特点和案例注意点栅格屏幕尺寸设置----响应式开发多个屏幕尺寸共同设置方法1：方法2栅格系统列...
    收起

  • Bootstrap框架-bootstrap入门课件PPT.ppt

     2020-02-26 16:24:07
    可以介绍下原理col-md-12{width100%}col-md-11{width91.6666666666%}以此类推 演示03 列偏移案例 演示04 列嵌套案例 演示05 列排序案例 可以说点关于原理的东西使用的是媒体查询media来实现 演示06 跨设备组合定义...
    收起

  • Bootstrap框架的使用和总结

     2020-07-04 11:36:19
    常见的响应式开发框架4.布局容器5.栅格栏嵌套容器行偏移行排序6.常见的布局方式7.常用的样式标题标签段落标签文本突出显示高亮显示删除线下划线缩小加粗斜体对齐方式设置大小写列表表格表单选项框输入框按钮背景颜色...
    收起
    css 前端

  • 使用Bootstrap框架写的一个小实例

     2021-07-09 18:02:04
    今天学习了一下Bootstrap框架，，写一个小实例练练手，感受一下bootstrap兼容三端的强大。 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta ...
    收起
    less html easyui css

  • 使用Bootstrap搭界面案例

     2022-04-03 23:53:44
    案例一:实现搜索书籍页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例一:实现搜索书籍页面</title> <!-- 引入Bootstrap的CSS --> <...
    收起
    java

  • Bootstrap开发框架的学习与应用

     多人点赞 热门讨论 2021-11-02 08:57:33
    二、Bootstrap应用阿里百秀案例2.读入数据总结 前言 Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 一、Bootstrap是什么？...
    收起
    前端

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,594
精华内容 5,837
热门标签
关键字：

bootstrap框架案例