Bootstrap入门（导航条&栅格系统）

最新推荐文章于 2024-05-30 15:01:09 发布

Bugxiu_fu

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/Bugxiu_fu/article/details/124617946

版权

在这里小编给各位友友们道个歉；这段时间小编偷懒，不过，后续会慢慢给大家补上，感谢一直在背后支持着小编的家人们。

那么接下来，老规矩，咱们先来看看今天内容的思维导图。

一、Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。

1、Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。

2、用于快速开发Web应用程序和网站的前端框架

3、Bootstrap是基于HTML、CSS、JS的，简介灵活，使Web开发更加快捷

总结：Bootstrap是一个建立在一个页面，可以在三个中端(PC、平板、手机)上完美的响应式前端框架

二、为什么使用Bootstrap

响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机) 移动设备有限浏览器支持容易上手

三、环境安装

官网：Bootstrap中文网
到Bootstrap官网下载Bootstrap库。

页面中引入库： bootstrap.min.css：在Bootstrap中有很多CSS样式。

所以要有CSS文件 bootstrap.min.js：严格意义上来说，Bootstrap是基于jQuery的一个库，jQuery又是javaScript的一个库。所以又要引入一个bootstrap.min.js库

四、Bootstrap CSS

固体容器【class=”container”】

示例代码:
<div class="container">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
<div>
在指定的页面中需要使用Bootstrap的样式或者js 比如导入相关依赖 css js

        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
        
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

01案例：巨幕实现搜索区域

效果展示：

源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!-- 支持手机端 -->
        <meta name="viewport"
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <!-- 在指定的页面中需要使用Bootstrap的样式或者js 比如导入相关依赖  css js -->
        <!-- 1.引入Bootstrap的css依赖 -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <!-- 2.引入jQuery类库，在Bootstrap.js之前 -->
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
        <!-- 3.引入Bootstrap.js -->
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
        <!-- 巨幕实现搜索区域 -->
        <!-- 占满整个容器的宽度 -->
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-4">Fluid jumbotron</h1>
                <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.
                </p>
            </div>
        </div>

        <!-- 间距 -->
        <div class="container">
            <div class="jumbotron bg-info">
                <div class="container">
                    <!-- 表单区域 -->
                    <form>
                      <div class="form-group" style="width: 300px;margin: 0 auto;">
                          <!-- 输入框组组件 -->
                          <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
                            <div class="input-group-append">
                              <button class="btn btn-primary" type="button" id="button-addon2">搜索</button>
                            </div>
                          </div>
                      </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

02案例：实现导航条

效果展示：

源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>原生态js实现导航条区域搜索</title>
    </head>
    <style type="text/css">
        /* 将所有页面外间距、内填充归零 */
         * {
            margin: 0px;
            /* 外间距 */
            padding: 0px;
            /* 内填充归零 */
            }
        /* id选择器 */
        #container {
            background-color: yellow;
            height: 900px;
        }

        /* class .类选择器 */
        .nav {
            width: 100%;
            height: 80px;
            background-color: gainsboro;
            line-height: 80px;
        }

        .nav_logo {
            float: left;
            /* 左飘浮动 */
            margin-left: 30px;
            /* 左外间距 */
            
            } 

        .nav_title{
            float: right;
            margin-right: 30px;
        }
        
        /* 设置超链接 */
        .nav_title a{
            text-decoration: none;
            /* 去下划线 */
            color: #005CBF;
            /* 设置蓝色*/
            display: inline-block;
            /* 行内元素==>行内块状元素 */
            width: 60px;
            }
        /* horer */
        .nav_title a:hover{
        color: red;
        }
        #serch{
            background-color: gainsboro;
            width: 45%;
            margin: 0 auto;
            /* div水平居中 */
            margin-top: 40px;
            /* 上外边距 */
            height: 200px;
            text-align: center;
            line-height: 200px;
            /* 行高上下居中 */
        }
        
        #nb{
            height: 15%;
            width: 35%;
        }
        
        #button{
            height: 15%;
        }
    </style>
    <body>

        <!-- 最大的容器-->
        <div id="container">
            <!-- 导航区域 -->
            <div class="nav">
                <div class="nav_logo">
                    你个重修的废物，有脸来这里，我都替你丢人?!
                </div> 
                 <div class="nav_title">
                    <a href="#">首页</a>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>

<!-- 搜索区域 -->
<div id="serch">
    <input type="text" name="" id="nb" value="" />
    <button id="button">按钮</button>
            </div>
        </div>
    </body>
</html>

03案例：栅格系统

效果展示：

源代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>栅格系统</title>
        <!-- 引入Bootstrap css类库 -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <!-- 引入jQuery类库 -->
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入Bootstrap类库 -->
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><!-- PC端手机端1：1显示 -->
    </head>
    <style type="text/css">
        
        .container {
            background-color: cornflowerblue;
        }

        .zking{
            /* 边框显示 */
            border: 1px solid #000000;
        }
    </style>

    <body>
        <div class="container">
            <div class="row">
                <!-- col-md-4 将单元格分4个等分 -->
                <div class="col-md-4 col-sm-6 zking">
                    234
                </div>
                <div class="col-md-4 col-sm-6 zking">
                    234
                </div>
                <div class="col-md-4 col-sm-6 zking">
                    567
                </div>
            </div>
        </div>
    </body>
</html>

Bugxiu_fu

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap入门（导航条&栅格系统）

在这里小编给各位友友们道个歉；这段时间小编偷懒，不过，后续会慢慢给大家补上，感谢一直在背后支持着小编的家人们。那么接下来，老规矩，咱们先来看看今天内容的思维导图。一、Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。1、Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端框架。 2、用于快速开发Web应用程序和网站的前端框架 3、Bootstrap是基于HTML、CSS、JS的，简介灵活，使W...
复制链接

扫一扫