IDEA中导入Bootstrap框架及入门教程

IDEA导入BootStrap框架及使用教程好处:定义了很多css样式和js插件。开发人员可以直接使用这些样式和插件得到丰富的页面效果。响应式布局*同一套页面可以兼容不同分辨率的设备Bootstrap快速入门官方网站：https://www.bootcss

南柯@一梦

13249人浏览 · 2022-04-05 11:52:40

南柯@一梦 · 2022-04-05 11:52:40 发布

BootStrap简介

概念: 一个前端开发的框架.Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
好处:
1. 定义了很多css样式和js插件。开发人员可以直接使用这些样式和插件得到丰富的页面效果。
2. 响应式布局
  
  *同一套页面可以兼容不同分辨率的设备

Bootstrap快速入门

官方网站：https://www.bootcss.com/

1. 下载Bootstrap

官网下载或网盘中下载链接：https://pan.baidu.com/s/1vWGrYLGltn6-dXmk0iPfsA
提取码：boo7

在这里插入图片描述

得到压缩包，解压后得到如图三个文件夹

在这里插入图片描述

2. 在项目中将解压后的三个文件夹（css，fonts，js)复制

在这里插入图片描述

3. 创建html文档，引入必要的资源

在官网找到基本模板，将其复制到新建html页面

在这里插入图片描述

由于bootstrap依赖jquery 因此需要去官网下载jquery.min.js的jar包

下载方式:

直接官网下载
https://jquery.com/ 官网地址，点击download，其中compressed为压缩版本，uncompressed为未压缩版本，找到自己要的版本下载即可。

在这里插入图片描述

到我上面分享的百度网盘中下载链接：https://pan.baidu.com/s/1vWGrYLGltn6-dXmk0iPfsA
提取码：boo7
经过调整基本模板页面如下:

<!doctype html>
<html lang="zh-CN">
<head>
    <!--三个meta标签 固定的写法-->
    <meta charset="utf-8"> <!--编码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--IE的支持-->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!--视图窗口--设备宽度--缩放比例(1:1)-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <!--使用本地下载好的bootstrap.min.css文件-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <!--使用本地已下载好的jquery-3.6.0.min.js文件-->
    <script src="js/jquery-3.6.0.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!--使用本地下载好的bootstrap.min.js文件-->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<h1>你好，世界！</h1>

</body>
</html>

响应式布局

栅格系统原理

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
	1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
	2.通过“行（row）”在水平方向创建一组“列（column）”。
	3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
	4.类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
	5.通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
	6.负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
	7.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
	8.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
	9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：江一行平均分成12个格子，可以指定元素占几个格子
步骤：
- 定义容器。相当于table
  - 容器分类：
    - container:固定宽度 (两边会留白)
    - container-fluid：100% 宽度
- 定义行：相当于tr 样式：row
- 定义元素。指定该元素在不同的设备上所占的格子数目。样式： col-设备代号 - 格子数目
  - 设备代号
    - .col-xs-：超小屏幕手机 (<768px) col-xs-12
    - .col-sm-：小屏幕平板 (≥768px)
    - .col-md-：中等屏幕 桌面显示器 (≥992px)
    - .col-lg-：大屏幕 大桌面显示器 (≥1200px)

创建Bootstrap_栅格系统.html文件

<!doctype html>
<html lang="zh-CN">
<head>
    <!--三个meta标签 固定的写法-->
    <meta charset="utf-8"> <!--编码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--IE的支持-->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!--视图窗口--设备宽度--缩放比例(1:1)-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <!--使用本地下载好的bootstrap.min.css文件-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <!--使用本地已下载好的jquery-3.6.0.min.js文件-->
    <script src="js/jquery-3.6.0.min.js" ></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!--使用本地下载好的bootstrap.min.js文件-->
    <script src="js/bootstrap.min.js" ></script>

    <style>
        .inner{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!--1.定义容器-->
    <div class="container-fluid">
        <!--2.定义行-->
        <div class="row">
            <!--3.定义元素 在大显示器上一行12个格子 在pad上一行6个格子-->
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
        </div>
    </div>
</body>
</html>

大屏幕显示效果
在这里插入图片描述 pad屏幕显示效果

CSS样式和js插件

全局CSS样式

按钮：class=“btn btn-default”

图片

class="img-responsive" ：响应式图片，在任意尺寸都占100%
<!--图片形状：-->
	<img src="..." alt="..." class="img-rounded"> <!--图片方的-->
    <img src="..." alt="..." class="img-circle"><!--图片圆的-->
    <img src="..." alt="..." class="img-thumbnail"><!--图片相框形式-->

表格

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

通过这些状态类可以为行或单元格设置颜色。

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

水平排列的表单

通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。

<!--表格模板-->
    <table class="table table-bordered table-hover"> <!--table:默认表格模板 table-bordered 边线 -hover 鼠标悬停-->
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>王宇</td>
            <td>2020001</td>
            <td>23</td>
        </tr>
        <tr>
            <td>王宇1</td>
            <td>2020002</td>
            <td>25</td>
        </tr>
        <tr>
            <td>王宇2</td>
            <td>2020003</td>
            <td>22</td>
        </tr>
    </table>

<hr>
    <!--表单模板-->
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

导航条

默认样式的导航条

navbar-defaul :白色底
反色的导航条

通过添加 .navbar-inverse 类可以改变导航条的外观。黑色底

<!--navbar-default:默认导航条白色 .navbar-inverse : 黑色的导航条-->
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <!--定义汉堡按钮-->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">首页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <!--下拉列表dropdown-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <!--搜索框Search-->
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

分页

禁用和激活状态

链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。

<nav aria-label="Page navigation">
    <ul class="pagination">
        <!--.disabled : 禁用状态 .active : 激活状态-->
        <li class="disabled">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <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>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

JS插件 – Carousel 轮播图

在Bootstrap官网中的js插件中 Carousel : 旋转木马

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="image/外国风电1.jpg" alt="...">
            <div class="carousel-caption">
                风电1
            </div>
        </div>
        <div class="item">
            <img src="image/外国风电2.jpg" alt="...">
            <div class="carousel-caption">
                风电2
            </div>
        </div>
        <div class="item">
            <img src="image/外国风电3.jpg" alt="...">
            <div class="carousel-caption">
                风电3
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>