Bootstrap基础

奔赴星辰而来

已于 2022-03-31 21:54:56 修改

阅读量816

点赞数

分类专栏： Bootstrap 文章标签： java eclipse

于 2022-03-31 21:39:24 首次发布

本文链接：https://blog.csdn.net/weixin_60930158/article/details/123883988

版权

Bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是Bootstrap

1.1，Bootstrap诞生于2011年，来自Twitter公司，是目前最受前端框架

1.2，是一个用于快速开发Web应用程序和网站的前端框架

1.3，Bootstrap是基于HTML，CSS，JS的，简单灵活，使得Web开发更加快捷

概述：Bootstrap是一个建立一个页面，就可以在三个终端(pc端，平板，手机)上完美展示的响应式前端框架

案例1：查询按钮原生态实现对比Bootstrap方式实现


<title>案例1：查询按钮原生态实现对比Bootstrap方式实现</title>
        <style>
        .aa{
            background-color:#005FD8 ;/* 背景颜色 */
            color: white;/* 字体颜色 */
            border: 0rem;/* 无边框 */
            width: 60px;/* 宽度 */
            height: 40px;/* 高度 */
            font-size: 18px;/* 字体大小 */
            border-radius: 4px;/* 设置外边框圆角 */
        }
        </style>
        <!-- 引入boostrap的CSS（层叠样式表） -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <!-- 支持手机端-->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    </head>
    <body>
        <input type="button" class="aa" value="查询" />
        <hr color="red" />
        &nbsp;&nbsp;<button class="btn btn-secondary">查询</button>
        <!-- 开始引入jQuery的类库 -->
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入bootstrap的类库 -->
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> 

效果：

案例2：演示Bootstrap页面在手机浏览器中展示效果

 <title>案例2：演示Bootstrap页面在手机浏览器中展示效果</title>
        <style type="text/css">
            .dh{
                background-color: #F9FAF7;/*背景颜色  */
                width: 100%;/* 宽度 */
                height: 50px;/* 高度 */
            }
            .bt{
                float: left;/* 左飘 */
                font-size: 18px;/* 字体大小 */
                line-height: 50px;/* 行高 */
                margin-left: 50px;/* 左间距 */
            }
            .lj{
                float: right;/* 右飘 */
                margin-right: 50px;/* 右间距 */
                line-height: 50px;/* 行高 */
            }
            .lj a{
                margin-left: 10px;/* 让a标签之间10个像素 */
            }
            .ss{
                background-color: #DCDCDC;/* 背景颜色 */
                height: 100px;/* 高度 */
                margin: 20px 50px 0px 50px;/* 上右下左 */
                text-align: center;/* 水平居中 */
                line-height: 100px;/* 跟高度保持一致  垂直居中 */
            }
            .ss input{/* 文本框样式 */
                border: 0px ;/* 无边框 */
                width: 200px;/* 宽度 */
                height: 23px;/* 高度 */
            }
            .ss button{
                background-color:#0077FF ;/* 背景颜色 */
                color: white;/* 字体颜色 */
                border: 0rem;/* 无边框 */
                width: 60px;/* 宽度 */
                height: 35px;/* 高度 */
                font-size: 18px;/* 字体大小 */
                border-radius: 4px;/* 设置外边框圆角 */
            }
        </style>
    </head>
    <body>
        <!-- 导航条区域 -->
        <div class="dh">
            <div class="bt">你好，欢迎来到大黄的废品回收站</div>
            <div class="lj">
                <a >首页</a>
                <a >登录</a>
                <a >注册</a>
                <a >我的购物车</a>
            </div>
        </div>
        
        <!-- 搜索区域 -->
        <div class="ss">
            <input type="text" />
            <button>查询</button>
        </div>

效果：

案例3：首页导航&搜索区域原生态实现（div+css）

<title>案例3：首页导航&搜索区域原生态实现（div+css）</title>
        <!-- 引入Bootstrap的CSS -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <!-- 支持手机端 -->
        <meta name="viewport"
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <style type="text/css">
                .navbar-collapse{
                    flex-grow: 0 ;/* 1代表弹性扩大占用父容器剩余空间  设置为0表示不占用  在固定容器中 */
                }
            </style>
    </head>
    <body>
        <!-- 导航组件 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- 固定容器 -->
            <div class="container">
                <a class="navbar-brand" href="#">你好，欢迎来到大黄的废品回收站</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse float-right" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">注册</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link ">我的购物车</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- 大致思路 
        第一行为搜索区域
        第二行
             左3  为书籍分类
             右9  
                  上为轮播图
                  下为新书上架
        -->
        <div class="container">
            <!-- 第一行 -->
              <div class="row">
                <div class="col">
                  搜索区域
                </div>
            </div>
            
            <div class="container">
            <!-- 第一行 -->
              <div class="row">
                <div class="col-3">
                  书籍分类
                </div>
            </div>
            
        </div>
        <!-- 引入jQuery的类库 -->
        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入Bootstrap的类库 -->
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> 

效果：