bootstrap框架基础使用

最新推荐文章于 2024-04-30 15:44:23 发布

Mybabyying

最新推荐文章于 2024-04-30 15:44:23 发布

阅读量1.1k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/Mybabyying/article/details/105227335

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

bootstrap框架基础使用

bootstrap简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

bootstrap引入和使用

网络引用

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  
   <!-- 包括所有已编译的插件 -->
  <script src="js/bootstrap.min.js"></script>

在这里，你必须引入三个文件，分别是jquery.js、bootstrap.min.js和bootstrap.min.css。这三个文件用于构建bootstrap模板，只有引入了这三个文件，才可以正常使用bootstrap

本地引用

进入bootstrap中文网：https://www.bootcss.com/
下载中文文档
在这里插入图片描述
下载之后压缩，会有三个文件夹：

把文件夹添加到项目目录中，然后本地引入

	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
 <!-- 引入bootstrap css文件 -->
	<link href="./css/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jquery文件 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 引入bootstrap js文件 -->
    <script src="js/js/bootstrap.min.js"></script>

因为bootstrap的效果都是基于jquery，所以必须引入jquery文件

bootstrap基础

实际上，随着移动端的兴起和火热，大众对移动设备的需求也越来越高，而bootstrap就是针对的移动端和pc端结合的响应式框架，它可以使你的代码可以“一套代码，多端使用”。使用起来更加的方便和快捷。
响应式就是指，在不同的屏幕比例下，bootstrap可以通过响应式而使页面更加完整的显示出来。

bootstrap组成

bootstrap布局时，实际上就是将屏幕分为12格，然后通过自己的需求来规定如何布局
bootstrap使用时分为四种情况：
1、.col-xs-* 超小设备屏幕(<768px)
2、.col-sm-* 小型设备&平板电脑屏幕（≥768px）
3、.col-md-* 中型设备&台式电脑屏幕（≥992px）
4、.col-lg-* 大型设备&台式电脑屏幕（>=1200px）
实例：
(显示在大型屏幕下显示一排三张图片；中型屏幕下显示一排两张；小型一排显示一张)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/css/bootstrap.min.css"/>
		<title></title>
	</head>
	<style type="text/css">
		/* 图片格式 */
		img{
			width: 300px;
			height: 300px;
		}
		p{
			font-size: 40px;
		}
	</style>
	<body>
		<div class="container">		<!-- 定义一个bootstrap容器 -->
			<div class="row">		<!-- 定义行 -->
				<div class="col-lg-4 col-md-6 col-sm-12">	<!-- lg--大型屏幕下所占格数; md--中型; sm--小型; -->
					<img src="img/kb1.jpg" >
					<p>kb1</p>
				</div>
				<div class="col-lg-4 col-md-6 col-sm-12">
					<img src="img/kb2.jpg" >
					<p>kb1</p>
				</div>
				<div class="col-lg-4 col-md-6 col-sm-12">
					<img src="img/kb3.jpg" >
					<p>kb1</p>
				</div>
			</div>
		</div>
	</body>
	<script src="js/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</html>

结果如下：
大于1200px屏幕大小时：
在这里插入图片描述
大于992px小于1200px屏幕大小时：

小屏幕时（750px）：

这样，就可以一套代码在不同的终端显示不同的样式格式了

bootstrap组件

bootstrap的组件包括无数可复用的组件，其中包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
在bootstrap中文网中，有bootstrap的组件库，组件库中的组件可以直接复制使用，在需求不太一样的时候，稍微改一下代码就可以了，并且组件都是响应式的。

Mybabyying

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap框架基础使用

bootstrap简介Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。bootstrap引入和使用网络引用<meta name="v...
复制链接

扫一扫

专栏目录