Bootstrap简介

最新推荐文章于 2023-02-06 23:41:33 发布

_萝卜头儿

最新推荐文章于 2023-02-06 23:41:33 发布

阅读量130

点赞数

文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/Z_2010317/article/details/126415469

版权

什么是Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

实例:

案例一：页面框架布局
要引入Bootstrap的css样式文件:
<link rel="stylesheet" href="./bootstrap-4.6.1/css/bootstrap-grid.min.css">

   <style>
        .row{
            text-align: center;
            padding: 0px;
            margin: 0px;
        }
        div{
            border: 1px solid black;
        }
        .col-md-12{
            height: 50px;
        }
        .col-md-2,
        .col-md-8,
        .col-md-2{
            height: 200px;
        }
        .col-xl-12{
            height: 70px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">头部</div>
                <div class="col-md-2">左部</div>
                <div class="col-md-8">中部</div>
                <div class="col-md-2">右部</div>
                <div class="col-xl-12">底部</div>
        </div>
    </div>
</body>

案例二:

<style>
        .row{
            background-color: #EEEEEE;
            height: 40px;
        }
        .col-md-2,.col-md-4{
            text-align: center;
            line-height: 40px;
            padding: 0px;
        }
        .row div:hover{
            background-color: #D4D3D1;
        }
        .nav-child{
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        .nav-child{
            width: 400px;
            position: absolute;
            display: none;
        }
        .row div:hover .nav-child{
            display: flex;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- row实际上是将元素设置成弹性盒子,故里面的子元素进行横向排列 -->
            <div class="col-md-2 col-sm-12">首页</div>
            <div class="col-md-2 col-sm-12">公开课</div>
            <div class="col-md-2 col-sm-12">直播课</div>
            <div class="col-md-2 col-sm-12">金课</div>
            <div class="col-md-2 col-sm-12">免费课程
                <ul class="row nav-child">
                    <li class="col-md-4">HTML5</li>
                    <li class="col-md-4">CSS3</li>
                    <li class="col-md-4">JavaScript</li>
                </ul>
            </div>
            <div class="col-md-2 col-sm-12">关于我们</div>
        </div>
        
    </div>
</body>

效果图