5、bootstrap

最新推荐文章于 2023-09-27 17:26:49 发布

隆隆不会敲代码

最新推荐文章于 2023-09-27 17:26:49 发布

阅读量210

点赞数

分类专栏： Spring+SpringMVC+Mybatis 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_41207136/article/details/107501843

版权

Spring+SpringMVC+Mybatis 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

5bootstrap

概述：Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。
作用：

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

内容

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

Bootstrap安装与使用

下载bootstrap的包，并解压
新建项目文件夹，用IDEA打开
在项目下新建assets文件夹，存放各类资源，在assets下新建存放插件的文件夹 plugins，在plugins下新建文件夹bootstrap，在plugins下复制jQuery.js

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets\plugins\bootstrap\css\bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="assets\plugins\bootstrap\css\bootstrap-theme.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>Hello Bootstrap</h1>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="assets\plugins\jquery.min.js"></script>
<script src="assets\plugins\bootstrap\js\bootstrap.min.js"></script>

</body>
</html>

bootstrap网格系统

渐进增强，就是向上兼容

优雅降级，就是向下兼容

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

工作原理：网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）
使用行来创建列的水平组
内容应该放置在列内，且唯有列可以是行的直接子元素
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4

网格选项

说明超小设备手机（< 768px）小型设备平板电脑（≥ 768px）中型设备台式电脑（≥ 992px）大型设备台式电脑（≥ 1200px）
网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes

说明	超小设备手机（< 768px）	小型设备平板电脑（≥ 768px）	中型设备台式电脑（≥ 992px）	大型设备台式电脑（≥ 1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

布局

table布局：需要等表格中的所有内容加载完成才能显示出来
div+css布局：可以加载一个显示一个，但对开发人员要求高
网格布局：集齐table+div+css布局的优势

用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets\plugins\bootstrap\css\bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="assets\plugins\bootstrap\css\bootstrap-theme.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>Hello Bootstrap</h1>
<div class="container" style="border: 1px solid green;">
    <div class="row">
        <div class="col-md-6" style="border: 1px solid #ff0000;">左</div>
        <div class="col-md-6" style="border: 1px solid #ff0000;">右</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="border: 1px solid #ff0000;">左</div>
        <div class="col-md-6" style="border: 1px solid #ff0000;">右</div>
    </div>
</div>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="assets\plugins\jquery.min.js"></script>
<script src="assets\plugins\bootstrap\js\bootstrap.min.js"></script>
</body>
</html>

在这里插入图片描述

媒体查询：媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。

浏览器支持

表格中的数字表示支持 @media 规则的第一个浏览器的版本号

Chrome IE Firefox Safari Opera
21 9 3.5 4.0 9

媒体类型：媒体类型在 CSS2 中是一个常见属性，可以通过媒体类型对不同设备指定不同样式。Screen、All、Print 为最常见的三种媒体类型。

ALL：所有设备
Braille：盲人用点子法触觉回馈设备
Embossed：盲文打印机
Handheld：便携设备
Print：打印用纸或打印预览视图
Projection：各种投影设备
Screen：电脑显示器
Speech：语音或音频合成器
Tv：电视机类型设备
Tty：使用固定密度字母栅格的媒介，比如电传打字机和终端

媒体特性：媒体查询中的大部分接受 min/max 前缀，用来表达其逻辑关系，表示应用大于等于或小于等于某个值的情况。没有特殊说明都支持 min/max。

width：Length 渲染界面的宽度
height：Length 渲染界面的高度
color：整数，表示色彩的字节数
color-index：整数，色彩表中的色彩数
device-aspct-ratio：整数/整数，宽高比例
device-height：Length 设备屏幕的输出高度
device-width：Length 设备屏幕的输出宽度
grid（不支持 min/max 前缀）：整数，是否基于栅格的设备
monochrome：整数，单色帧缓冲器中每像素字节数
resolution：分辨率（dpi/dpcm）分辨率
scan（不支持 min/max 前缀）：Progressive interlaced，Tv 媒体类型的扫描方式
orientation（不支持 min/max 前缀）：Portrait//landscape 横屏或竖屏

使用媒体查询
语法：@media 媒体类型 and (媒体特性) {你的样式}

例如：小于480px,执行大括号的内容
@media screen and (max-width:480px){
	.div{
		border:1px solid yellow;
	}
}
最大宽度：max-width 是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。

最小宽度：min-width 与 max-width 相反，指的是媒体类型大于或等于指定宽度时，样式生效。

多个特性一起使用时：媒体查询可以使用关键词 and 将多个媒体特性结合在一起。也就是说，一个媒体查询中可以包含 0 到多个表达式，表达式又可以包含 0 到多个关键字，以及一种媒体类型。
@media screen and (min-width:600px) and (max-width:900px) {
  body {background-color:#F5F5F5;}
}

Chrome	IE	Firefox	Safari	Opera
21	9	3.5	4.0	9

强制样式：样式正常使用时会根据就近原则来获取样式，但当在设置样式的后面添加！important，则此样式优先级最高，强制显示此样式。如：

.div{
	border:1px solid black ! important;
}

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

bootstrap表格：Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

*

表格类

tr、th、td类

示例

<div class="container">
    <table class="table table-striped table-bordered table-hover">
        <caption>基本的表格布局</caption>
        <thead>
        <tr class="">
            <th class="warning">名称</th>
            <th>城市</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Tanmay</td>
            <td>Bangalore</td>
        </tr>
        <tr>
            <td>Sachin</td>
            <td>Mumbai</td>
        </tr>
        </tbody>
    </table>
</div>

bootstrap字体图标

字体图标：所谓字体图标，就是使用字体（Font）格式的字形做成了图标。
Bootstrap自带的字体图标：Bootstrap 捆绑了 200 多种字体格式的字形，在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。

使用示例
<span class="glyphicon glyphicon-search"></span>
其他字体库

FontAwesome：http://fontawesome.dashgame.com/
LineAwesome：https://icons8.com/line-awesome
SocialIcons：http://www.socicon.com/chart.php
阿里巴巴矢量图标库：http://www.iconfont.cn/

ass=“glyphicon glyphicon-search”>


* 其他字体库

> - FontAwesome：http://fontawesome.dashgame.com/
> - LineAwesome：https://icons8.com/line-awesome
> - SocialIcons：http://www.socicon.com/chart.php
> - **阿里巴巴矢量图标库**：http://www.iconfont.cn/

隆隆不会敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5、bootstrap

5bootstrap概述：Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。作用：移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：所有的
复制链接

扫一扫