2022/09/25、26 day13/14：BootStrap（一）

最新推荐文章于 2024-08-10 16:15:00 发布

上水若善

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量192

点赞数

分类专栏： 09 JavaWeb 文章标签： bootstrap javascript 前端框架

本文链接：https://blog.csdn.net/w2079930908/article/details/127080077

版权

本文介绍了Bootstrap，一个源自Twitter的流行前端框架，强调其响应式布局和内置的CSS样式与JS插件。通过Bootstrap，开发者可以快速构建适应不同设备的网页。内容包括Bootstrap的概念、好处、快速入门方法、响应式布局的实现、栅格系统以及全局CSS样式、组件和JS插件的使用。最后，以黑马旅游网首页作为案例进行说明。

摘要由CSDN通过智能技术生成

今日内容

回顾
- 前端知识：
  - html
  - css
  - JavaScript
  - 评价：单纯用html和css、JavaScript开发一个网页，成本开始比较高的。所以要学一套前端框架。
今日内容：
- Bootstrap（会用就可以了）

Bootstrap

概念：一个前端开发的框架，来自Twitter，是目前很受欢迎的前端框架。基于HTML、CSS、JavaScript的，它简洁灵活，使得web开发更加快捷。
- 框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。
- 好处：
  1. 定义了很多的CSS的样式和JS插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
  2. 响应式布局。
    1. 同一套页面可以兼容不同分辨率的设备。（可以通话分辨率的不同自动调整页面的大小）
快速入门
1. 下载Bootstrap：bootstrap-3.3.7-dist.zip
2. 在项目中讲这三个文件夹复制到项目中。
3. 创建一个html页面，引入必要的资源文件。

代码1：快速入门_基本模板

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ 【固定写法】-->


    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">




    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js" ></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>


</body>
</html>

响应式布局

两点好处，先学响应式布局。

同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。
步骤：
1. 定义容器。相当于之前的table
  - 容器分类：
    - container：居中，有留白。每种屏幕都有固定的宽度
    - container-fluid：每一种设备都是100%的宽度
2. 定义行。相当于之前的tr 样式：row
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目。
  - 设备代号：
    - xs：超小屏幕手机（<768px）：col-xs-12
    - sm：小屏幕平板电脑（>=768px）
    - md：中等屏幕桌面显示器（>=992px）
    - lg：大屏幕大桌面显示器（>=1200px）
注意事项：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置的栅格类属性的设备代码的最小值，默认会一个元素占满一整行。

CSS样式和JS插件

全局CSS样式：
- 按钮：class=“btn btn-default”
- 图片：
  - class=“img-responsive”：图片在任意尺寸都占100%
  - 图片形状：
    - ：方形
    - ：圆形
    - ：相框
- 表格：
  - table
  - table-bordered
  - table-hover"
- 表单：
  - 给表单添加：class=“form-control”
组件
- 导航条
- 分页条
插件
- Carousel（轮播图）

代码1：CSS全局样式_按钮/图片

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ 【固定写法】-->


    <title>Bootstrap 栅格系统</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">




    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js" ></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <style>

    </style>
</head>
<body>

<a class="btn btn-default" href="#" >Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<br>



<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

<hr>
<img src="img/banner_1.jpg" class="img-responsive "/>
<img src="img/banner_1.jpg" class="img-responsive img-rounded"/>
<img src="img/banner_1.jpg" class="img-responsive img-circle"/>
<img src="img/banner_1.jpg" class="img-responsive img-thumbnail"/>
<!--<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">-->
</body>
</html>

代码2：CSS全局样式2_表格/表单

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ 【固定写法】-->


    <title>Bootstrap 栅格系统</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">




    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js" ></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <style>

    </style>
</head>
<body>

<table class="table table-bordered table-hover" >
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>001</td>
        <td>张三</td>
        <td>23</td>
    </tr>
    <tr>
        <td>002</td>
        <td>张三</td>
        <td>23</td>
    <tr>
        <td>003</td>
        <td>张三</td>
        <td>23</td>
    </tr>
</tr>
</table>


<hr><hr><hr>


<form class&