零基础-初识BootStrap，10分钟带你熟练使用BootStrap

低调的丶行者

已于 2022-11-05 16:08:19 修改

阅读量374

点赞数 1

分类专栏： html+css+js笔记文章标签： html 前端 bootstrap

于 2022-11-05 16:02:42 首次发布

本文链接：https://blog.csdn.net/m0_74794442/article/details/127704586

版权

html+css+js笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

BootStrap常用样式

1.BootStrap的初步认识

Bootstrap，来自 Twitter，是一款受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

大家可以在github上下载：https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

要想使用BootStrap需要在页面上引用BootStrap的支持。
在这里插入图片描述

bootstrap简介

控制大小,控制颜色,12栅格排版.bootstrap常用表单样式、表格样式

BootStrap栅格layout

BootStrap将网页均分为12分（12个格子），响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="./assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="./assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="./assets/"></script>
    <style>
        .row div{
            background-color: #0022ff;
            height: 40px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!--让元素在容器中水平居中 -->
    <div class="container">
        <div class="row">
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">1</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">2</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">3</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">4</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">5</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">6</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">7</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">8</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">9</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">10</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">11</div>
            <div class="col-md-1" style="background-color: red;height: 40px;border: 1px solid black">12</div>
        </div>
        <div class="row">
            <div class="col-md-4" style="background-color: #ffae00;height: 40px;border: 1px solid black;text-align: center">1</div>
            <div class="col-md-4" style="background-color: #ffd500;height: 40px;border: 1px solid black;text-align: center">2</div>
            <div class="col-md-4" style="background-color: #ffae00;height: 40px;border: 1px solid black;text-align: center">3</div>
        </div>
        <div class="row">
            <div class="col-md-1">4</div>
            <div class="col-md-1" style="background-color: black">4</div>
        </div>
        <div class="row">
            <div class="col-md-6">6</div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">5</div>
                    <div class="col-md-3">5</div>
                    <div class="col-md-3">5</div>
                    <div class="col-md-3">5</div>
                </div>

            </div>
        </div>

    </div>
</body>
</html>

BootStrap常用组件

按钮组件

语法:
  <input type=button class="btn" value="我是按钮">
提示：
   btn是所有按钮的基本样式

class参数说明：
第一个参数：btn为按钮的基本样式
第二个参数为按钮的颜色样式
语境⾊彩：
btn-default 默认-⽩⾊
btn-success 绿⾊
btn-danger 红色
…
第三个参数为按钮的大小

按钮还有一种默认为整行的效果，称为块级按钮 btn-block

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <!-- 按钮样式-->
        <button class="btn">无样式按钮</button>
        <button class="btn btn-default">默认样式按钮</button>
        <button class="btn btn-info">info按钮</button>
        <button class="btn btn-warning">warn按钮</button>
        <button class="btn btn-danger">danger按钮</button>
        <button class="btn btn-primary">标准按钮</button>
        <button class="btn btn-link">link按钮</button>
    </div>
</body>
</html>

样式：

面板组件

面板组件.panel提供基本的边界和内部，来包含内容

a、基本面板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <!--基础面板-->
        <div class="panel panel-default">
            <div class="panel-body">
                这是一个基础面板
            </div>
        </div>
    </div>
</body>
</html>

b、带标题的面版

用.panel-heading可以简单地加入一个标题容器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">		
		<div class="panel panel-default">
			<div class="panel-heading">
				面板标题
			</div>
			<div class="panel-body">
				面板内容
			</div>
		</div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

导航条

导航条是在您的应用或网站中作为导航标头的响应式元组件。它们在移动设备上可以折叠（并且可开可关），且在可用的视口宽度增加时变为水平展开模式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <!--导航条-->
		<div class="navbar navbar-default" role="navigation">
			<!--折叠显示按钮，当横向分辨率不够显示时则显示当前折叠导航-->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<!--折叠按钮上面的3条短线，好看的-->
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<!--默认链接，不会折叠-->
				<a class="navbar-brand" href="#">Brand</a>
			</div>
				
			<!--当分辨率足够显示时，显示当前导航-->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">新闻</a></li>
					<li><a href="#">体育</a></li>
				</ul>
			</div>
		</div>
    </div>
</body>
</html>

标签式导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">美食</a></li>
        </ul>
    </div>
</body>
</html>

效果：
标签式导航

胶囊式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="nav nav-pills">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">美食</a></li>
        </ul>
    </div>
</body>
</html>

效果：

胶囊式导航

面包屑式导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="breadcrumb">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">美食</a></li>
        </ul>
    </div>
</body>
</html>

效果：

面包屑式导航

分页式导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="pagination">
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
    </div>
</body>
</html>

效果：
分页式导航

翻页式导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
<body>
    <div class="container">
        <ul class="pager">
            <li><a href="#">上一页</a></li>
            <li><a href="#">下一页</a></li>
        </ul>
    </div>
</body>
</html>