Bootstrap学习

最新推荐文章于 2024-06-18 21:32:55 发布
最新推荐文章于 2024-06-18 21:32:55 发布
阅读量629 收藏 3
点赞数
分类专栏： Bootstrap 文章标签： 乱码 过滤器 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45790889/article/details/116483160
版权

响应式开发

Bootstrap 前端开发框架

1.1 Bootstrap 使用

在这里插入图片描述
1.创建文件夹结构
在这里插入图片描述
2.创建html骨架结构
在这里插入图片描述

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
	  <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
	  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	  <!-- 视口的设置: 视口的宽度和设备一致，默认的缩放比列和PC端一致，用户不能自行缩放 -->
	  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
      <!-- <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">
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
      <!-- 包括所有已编译的插件 -->
       <!-- <script src="js/bootstrap.min.js"></script> -->
   </body>
</html>

3.引入相关样式文件

<!-- 引入 Bootstrap 核心样式-->
      <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

4.书写内容
在这里插入图片描述

按钮 演示

访问https://v3.bootcss.com/css/?#buttons-tags
在这里插入图片描述
直接复制代码使用
在这里插入图片描述
效果:
在这里插入图片描述

也可以自定义样式，覆盖原先的样式(注意权重问题)。
在这里插入图片描述
效果:
在这里插入图片描述

1.2 响应布局

在这里插入图片描述

container类

代码:

<div class="container">响应布局</div>

效果:
在这里插入图片描述

container-fluid类(适合做app端)

代码:

<div class="container-fluid">响应布局</div>

效果:
在这里插入图片描述

Bootstrap 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

是将页面布局划分为等宽的12列，然后通过列数的定义来模块化页面布局。
在这里插入图片描述

2.1 简介

在这里插入图片描述

2.2 栅格参数

在这里插入图片描述

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格系统</title>
		<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- 视口的设置: 视口的宽度和设备一致，默认的缩放比列和PC端一致，用户不能自行缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" /> 
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style type="text/css">
			[class^="col"] {
				border: 1px solid #CCCCCC;
			}
		</style> 
	</head>
	<body>
		<div class="container">
			<div class="row">
			   <div class="col-lg-3">col-lg-3</div>
			   <div class="col-lg-3">col-lg-3</div>
			   <div class="col-lg-3">col-lg-3</div>
			   <div class="col-lg-3">col-lg-3</div>
			</div>
			<div class="row">
				<!-- 如果col-lg的份数相加等于12 -->
			   <div class="col-lg-6">col-lg-6</div>
			   <div class="col-lg-2">col-lg-2</div>
			   <div class="col-lg-2">col-lg-2</div>
			   <div class="col-lg-2">col-lg-2</div>
			</div>
			<div class="row">
				<!-- 如果col-lg的份数相加小于12 则会?-->
			   <div class="col-lg-6">col-lg-6</div>
			   <div class="col-lg-2">col-lg-2</div>
			   <div class="col-lg-2">col-lg-2</div>
			   <div class="col-lg-1">col-lg-1</div>
			</div>
			<div class="row">
				<!-- 如果col-lg的份数相加大于12 则会?-->
			   <div class="col-lg-6">col-lg-6</div>
			   <div class="col-lg-2">col-lg-2</div>
			   <div class="col-lg-2">col-lg-2</div>
			   <div class="col-lg-3">col-lg-3</div>
			</div>
		</div>
	</body>
</html>

效果:
在这里插入图片描述
总结:

如果col-lg的份数相加等于12 则div能占满整个 的container 的宽度
如果col-lg的份数相加 小于 12 则不占不满整个 的container 的宽度 会有空白
如果col-lg的份数相加 大于12 多于的那一列会 另起一行显示

col-lg是适合在大屏幕使用，而bootstrap也为我们提供在不同的屏幕下使用

<div class="row">	
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">col-lg-3</div>
</div>

2.3 列嵌套

在这里插入图片描述
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列嵌套</title>
		<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- 视口的设置: 视口的宽度和设备一致，默认的缩放比列和PC端一致，用户不能自行缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" /> 
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style type="text/css">
			.row>div{
				height: 50px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-4">col-md-4</div>
				<div class="col-md-4">col-md-4</div>
				<div class="col-md-4">col-md-4</div>
		</div>
	</body>
</html>

效果:
在这里插入图片描述

注意:想要盒子之间分隔开来，加margin: 0 10px; 是不行的
在这里插入图片描述
宽度为33.33333333%且浮动，使用margin会有一个盒子挤下来
在这里插入图片描述
解决办法: 在里面再嵌套一个小盒子，宽度为100%就行了

列嵌套代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列嵌套</title>
		<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- 视口的设置: 视口的宽度和设备一致，默认的缩放比列和PC端一致，用户不能自行缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" /> 
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style type="text/css">
			.row>div{
				height: 50px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="row">
						<div class="col-md-6">a</div>
						<div class="col-md-6">b</div>
					</div>
				</div>
				<div class="col-md-4">col-md-4</div>
				<div class="col-md-4">col-md-4</div>
		</div>
	</body>
</html>

效果:
在这里插入图片描述

注意: 列嵌套我们嵌套最好加1个行row 这样可以取消父级的padding值 而且高度自动和父级一样高

2.4 列偏移

在这里插入图片描述
例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>偏移</title>
		<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- 视口的设置: 视口的宽度和设备一致，默认的缩放比列和PC端一致，用户不能自行缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" /> 
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style type="text/css">
			.row>div{
				height: 50px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<!-- 两个盒子偏移量: 12-两盒子偏移总量  -->
				<div class="col-md-4">左偏移</div>
				<div class="col-md-4 col-md-offset-4">右偏移</div>
			</div>
			<div class="row">
				<!-- 一个盒子偏移量: (12-盒子偏移总量)/2 -->
				<div class="col-md-6 col-md-offset-3">一个盒子</div>
			</div>	
		</div>
	</body>
</html>

效果:
在这里插入图片描述

2.5 列排序

在这里插入图片描述
代码:

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>偏移</title>
		<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- 视口的设置: 视口的宽度和设备一致，默认的缩放比列和PC端一致，用户不能自行缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" /> 
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style type="text/css">
			.row>div{
				height: 50px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<!--col-lo-push推  col-lo-pull拉 -->
				<div class="col-md-4 col-lg-push-8">左偏移</div>
				<div class="col-md-8 col-lg-pull-4">右偏移</div>
			</div>
		</div>
	</body>
</html>

效果:
在这里插入图片描述

2.6响应式工具

在这里插入图片描述

好三少
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Bootstrap入门（一）
qq_62331938的博客
04-27 2231
前言 大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Bootstrap 学习一门新的技术我们终究都逃不过三个W。What,Why,Where。 1.What——Bootstrap是什么？ Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍...
bootStrap学习
01-25
这个"BootStrap学习"资源很可能是为了帮助初学者或者开发者掌握BootStrap3.3.7版本的基础和进阶技巧。BootStrap3是BootStrap的第三个主要版本，它在2013年发布，并在后续几年内得到了广泛的应用和更新，提供了丰富的...
BootStrap简单学习
秋雨绵绵
03-04 1318
本文是关于BootStrap的简单学习，适合后端开发者查阅。
Bootstrap的快速入门
最新发布
2301_80638487的博客
06-18 1019
①Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集，它简洁灵活，使得web开发更加的便捷.②Bootstrap是一个建立一个页面,就可以在3三个终端(PC端、平板、手机)上完美展示的响应式前端框架。
Bootstrap的学习
liaowenxiong的博客
12-09 688
文章目录概念入门 概念 一个前端开发的框架，Bootstrap，来自Twitter， 是目前很受欢迎的前端框架。Bootstrap 是基于HTML、 CSS、 JavaScript 的，它简洁灵活，使得Web开发更加快捷。 框架： 一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。 好处： 1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2.响应式布局。同一套页面可以兼容不同分辨率的设备。 入门 1.下载 Bootstrap，地址：https:
bootstrap学习
02-14
这个"bootstrap学习"的压缩包显然包含了一些基本的学习资源，让我们详细探讨一下Bootstrap的主要知识点。 首先，Bootstrap的核心特性在于其响应式网格系统。这个系统基于12列的布局，允许开发者通过简单的类选择器...
Bootstrap学习笔记
06-25
这个是我的前端学习笔记Bootstrap
bootstrap学习笔记之初识bootstrap
10-22
为了更好地学习和应用Bootstrap，建议通过官方文档或中文网了解详细信息，实践操作并逐步掌握各个组件的用法。此外，不断探索和研究社区中丰富的插件和扩展，将使你的Bootstrap项目更具特色和功能。 总之，...
Bootstrap学习(三)
老鬼的博客
08-06 276
留坑待用 三、网格系统 1.工作原理 2.基本用法 3.列偏移 4.列排列 5.列的嵌套 三、网格系统 Bootstrap框架中的网格系统就是将容器平分成12份。 1.工作原理 1.1数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如 &lt;div class="container"&gt...
bootstrap学习资料
08-17
这一份文档资源，是平时有空边学习边整理，希望对一开始接触bootstrap的人有所帮助
Bootstrap框架学习
2023也要一起加油鸭
03-01 499
文章目录1.Bootstrap的概念2.Bootstrap的好处3.快速入门知识讲解4.Bootstrap的响应式布局5.CSS样式和JS插件（具体使用去Bootstrap中文官网查找）5.1 全局CSS样式5.2 组件5.3 轮播图6.Bootstrap练习 1.Bootstrap的概念 一个前端开发框架，Bootstrap 基于 HTML、CSS、JavaScript 的，它简洁灵活，......
( 一)bootstrap学习——初识bootstrap
为者常成，行者常至
05-02 2541
bootstrap是一个http://v3.bootcss.com/
Bootstrap 学习（一）入门
weixin_34128534的博客
04-16 112
一：什么是Bootstrap？Bootstrapbootstrap是目前留下的前端框架之一，具备已下特点： 基于HTML、CSS、JavaScript开发的；样式展现方面定义了大量全局样式、列表、按钮等样式组件；特效方面实现了轮播、菜单等常用的js控件；样式采用less编写，js调用了jquery库；来自Twitter，现在委托保管再github上。Bootstrap适用于网站的开发，不适用于管理...
Bootstrap基础学习
weixin_52031422的博客
07-07 536
这是对Bootstrap基础的学习，其中将会通过实现小案例的形式结合对知识点进行掌握
bootstrap 学习
weixin_43157199的博客
03-22 323
栅栏 <div class=“container”> <div class=“row”> <div class=“col-md-1”>.col-md-1</div> <!—由于这12个div都一样,所以这里省略了其他10个—> <div class=“col-md-1”>.col-md-1</div> </d...
BootStrap学习
李春丽的博客
12-25 357
BootStrap：全局css样式、组件、JavaScript插件。 首先，引入事先做好的css文件、fonts文件、js文件。 【栅格系统代码库】： 在title上面写： 在title下面写： min版本是压缩版的。 BootStrap的栅格系统 div{ bor
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值