Bootstrap笔记

.....,,.,

已于 2022-07-22 15:55:45 修改

阅读量286

点赞数

文章标签：大数据 bootstrap

于 2022-07-17 16:35:29 首次发布

本文链接：https://blog.csdn.net/m0_62938286/article/details/125743139

版权

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

好处：

定义了很多CSS样式和js插件,开发人员直接可以使用这些样式和插件得到丰富的页面效果

响应式布局：同一套页面可以兼容不同分辨率的设备

快速入门

1.下载bootstrap

2、在项目中将三个文件夹复制

3、创建HTML页面，引入必要的资源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

</head>
<body>
<h1>你好世界</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

响应式布局：

同一套页面可以兼容不同分辨率的设备

实现：依赖于栅格系统：将一行平均分为12个格子，可以指定元素占几个格子

步骤：

1、定义容器：相当于之前的table

容器分类：

1、container:两边留白

2、container-fluid：每一种设备都是100%宽度

2、定义行、相当于之前的 tr 样式：row

3、定义元素：指定该元素在不同的设备上，所占的格子数目样式：col-设备代号-格子数目

设备代号：

1、xs:超小屏幕手机（<768px)：col-xs-12

2、sm:小屏幕平板（≥768px)

3、md:中等屏幕桌面显示器（≥992px)

4、lg : 大屏幕大桌面显示器（≥1200px)

注意：

1、一行中如果格子数目超过12，则超出部分自动换行

2、栅格类属性可以向上兼容

3、如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行

CSS样式以及js插件

全局CSS样式：

按钮：class="btn btn-default"//默认按钮

图片：class="img-responsive" ：图片在任意尺寸都占100%

class="img-rounded":图片为方形

class="img-circle" :图片为圆形

class="img-thumbnail" 图片为相框形式

表格：table

table-bordered

table-hover

表单：给表单项添加：class="form-control" 主要需求看bootstrap文案

组件：

导航条

分页条

插件

轮播图

就是一句话看文档，文档看不懂的话，将看不懂的代码注释掉再看效果

.....,,.,

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap笔记

metaname="viewport"content="width=device-width,initial-scale=1">3、定义元素指定该元素在不同的设备上，所占的格子数目样式col-设备代号-格子数目。1、xs超小屏幕手机（
复制链接

扫一扫