Bootstrap中的一些知识小点

最新推荐文章于 2022-07-20 13:16:30 发布

高明懿大可爱

最新推荐文章于 2022-07-20 13:16:30 发布

阅读量264

点赞数 1

分类专栏： bootstarp 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_42459832/article/details/109522004

版权

##Bootstarp###Bootstarp是什么？它是一个轻量级的CSS框架，是现在主流使用的能够快速搭建一个响应页面的CSS框架。Bootstarp最新版本为4.但现在主流市场还是以3为主。###如何使用Bootstarp <link rel="stylesheet" href="./css/bootstrap-theme.min.css"><!--可选的Bootstarp主题文件（一般不用

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

Bootstrap

Bootstrap是什么？

它是轻量级的CSS框架。是现在主流使用的能够快速搭建一个响应页面的CSS框架。	
Bootstrap最新的版本为4.但现在主流市场还以3为主。

如何使用Bootstrap框架？

首先在页面中引入Bootstrap

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

栅格系统

栅格系统是Bootstrap的核心系统之一，他使用了媒体查询功能完善了一整套非常便利的响应式方法。

栅格系统的基础构成：
1、行（row）
2、单元格（col)
栅格系统遵循的分配方式是12份式的。

在这里插入图片描述

流式布局容器

将最外面的布局元素 .container修改为 .container-fluid，就可以将固定宽度的栅格布局转换为100%宽度的布局。

```
<div class="container-fluid">
	<div class="row">
		...
	</div>
</div>
```

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Bootrap的基础使用<

最低0.47元/天解锁文章

高明懿大可爱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap中的一些知识小点

##Bootstarp###Bootstarp是什么？它是一个轻量级的CSS框架，是现在主流使用的能够快速搭建一个响应页面的CSS框架。Bootstarp最新版本为4.但现在主流市场还是以3为主。###如何使用Bootstarp <link rel="stylesheet" href="./css/bootstrap-theme.min.css"><!--可选的Bootstarp主题文件（一般不用
复制链接

扫一扫