Bootstrap(入门)

最新推荐文章于 2024-08-17 22:24:13 发布

黩817

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量865

点赞数

分类专栏：前端 html 文章标签： bootstrap css html

本文链接：https://blog.csdn.net/weixin_66939060/article/details/124505707

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

Bootstrap

概念：一个前端开发的框架，Bootstrap是基于html、css、Javascript的。

框架：框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码。
好处：
① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。
② 响应式布局：同一套页面可以兼容不同分辨率的设备。

快速入门

1.下载BootStrap

2.下载后有三个文件夹，将这三个文件夹复制到项目中

3.创建html页面，引入需要的东西

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例4：首页导航&搜索区域Bootstrap实现&搭首页框架</title>
		<!-- 引入Bootstrap -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
	</head>
	<body>
		
		<!-- 引入jQuery的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入Bootstrap -->
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

响应式布局

一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架；

栅格布局：

把每一行布局分为12分，元素的占地宽度靠份数定义

栅格属性：

1.使用栅格必须放在.container中,或者.container-fluid中
2.每一行每一个row，弹性，主轴x，可以换行，有-15px的左右外边距
3.使用col-n，来声明元素在row中占几份

黩817

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap(入门)

Bootstrap 概念：一个前端开发的框架，Bootstrap是基于html、css、Javascript的。框架：框架是一个半成品软件，开发人员可以在框架基础上进行开发，简化编码。好处： ① 定义了许多CSS样式和js插件。开发者可以直接引用这些样式和插件。 ② 响应式布局：同一套页面可以兼容不同分辨率的设备。快速入门 1.下载BootStrap 2.下载后有三个文件夹，将这三个文件夹复制到项目中 3.创建html页面...
复制链接

扫一扫

专栏目录