BootStrap

最新推荐文章于 2022-12-05 11:40:29 发布

Little石头

最新推荐文章于 2022-12-05 11:40:29 发布

阅读量104

点赞数

分类专栏： JavaScript HTML

本文链接：https://blog.csdn.net/weixin_41712089/article/details/103356890

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

BootStrap概述
概念：一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
同一套页面可以兼容不同分辨率的设备。

内部定义了很多的CSS样式,可以让我们节省美化元素的时间,直接使用定义好的样式即可.
响应式布局:针对于不同的设备(手机/PAD/Laptop/PC)提供了不同的分辨率页面的自动适应.
BootStrap的使用(321使用)
3 -> 开头head标签中要写三个meta标签,这三个标签必须要有,还必须在最前面.
2 -> 引入两个JavaScript文件,一个是jQuery,一个是bootStrap本身的Js文件,jQuery的引入必须在BootStarp的引入之前(最好在页面的末尾进行引入)
1 -> 引入BootStrap的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 HelloWorld</title>
	
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
	    <!-- 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>

BootStrap的栅格系统
将一行分为12个格子 -> 人为的规定每个元素占用多少个格子(在不同的设备下元素应该如何进行显示)
操作步骤
定义一个容器

怎么样就是容器了? 被BootStrap所管理 -> 定义class为container/container-fluid
- container留白,container-fluid不留白.
定义行
- 定义class为row
定义元素：指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
- xs -> 手机 sm -> 平板 md -> 笔记本电脑 lg -> 大屏幕
- col-设备代号-格子数量
设备代号：
- 1. xs：超小屏幕手机 (<768px)：col-xs-12
- 1. sm：小屏幕平板 (≥768px)
- 1. md：中等屏幕桌面显示器 (≥992px)
- 1. lg：大屏幕大桌面显示器 (≥1200px)
    注意事项：
col-设备代号-格子数量中的格子数量最大是12,但是超出12也可以,但是不推荐写超出12的数据.
向上兼容 -> 比如说最小的屏幕上一行2个元素,一个元素占6个格子. 没有定义更大的,在真是设备更大的情况下,一行还是2个元素.
不会向下兼容 -> 比如说最大的设备一行12个格子,一个元素占1个格子,没有设置其他的情况下,缩小的话,格子的自动水平排列.
BootStrap的按钮以及图片
按钮 -> 将class设置为"btn 想要的按钮的样式"
图片 -> 自适应(图片会随着设备的大小而进行缩放)将img的class设置为img-responsive
- 图片img-rounded(正方形) img-circle(圆形) img-thumbnail(相框)
  BootStrap中的表格和表单
表格
- class = table (给表格赋予了最基本的一些样式)
- class = table-bordered (给表格赋予边框)
- class = table-hover(鼠标悬停在某个tr上时,tr会变色)
- class = table-responsive(表格会变成响应式表格[在任何设备上都可以进行显示])
表单
- class = form-horizontal 会将表单变为水平排列

CSS样式和JS插件
全局CSS样式：

按钮：class=“btn btn-default”
图片：
- class=“img-responsive”：图片在任意尺寸都占100%
- 图片形状
- - ：方形
- - ：圆形
- - ：相框
表格
- table
- table-bordered
- table-hover
表单
- 给表单项添加：class=“form-control”

Little石头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap

BootStrap概述概念：一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。好处：1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的...
复制链接

扫一扫