Java教程

01 bootstrap 笔记

本文主要是介绍01 bootstrap 笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

bootstrap 笔记

1. 引入方式

  • 通过官网下载静态资源到本地 bootstrap
  • 通过cdn服务直接引入 bootcdn
  • 注意：bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery，并且jQuery一定要在bootstrap前导入！

2. 布局容器

"""bootstrap 就是给 html标签加上class，然后改变其样式"""
# 第一种布局容器
<div class="container">
  ...
</div>

# 第二种布局容器
<div class="container-fluid">
  ...
</div>

3. 栅格系统（学会布局就相当于学会了bootstrap）

  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕变化而变化
"""
如果只写.col-md-这个类的话，只能在桌面显示器中响应式布局，在编程手机端现实时需要加上.col-xs-这个类。如果想要在四种尺寸中都响应式布局，需要将四个类都加在所在区域
.col-xs-		.col-sm-		.col-md-			.col-lg-
超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)

class="row"： 将其所在的区域划分成12份，可以按照col-md-3来去值（这里取3份）
col-md-offset-2： 将div从左到右移动两份
"""
<div class="container">
	<div class="row">
		<div class="col-md-3 c1 col-xs-3"></div>
		<div class="col-md-8 c1 col-xs-8">
			<div class="row">
				<div class="col-md-7 c2 col-xs-7"></div>
				<div class="col-md-5 c2 col-xs-5"></div>
			</div>
		</div>
		<div class="col-md-1 c1 col-xs-1"></div>
		<div class="col-md-8 c1 col-md-offset-2"></div>
		<div class="col-md-3 c1"></div>
	</div>
</div>

4. 排版布局

<h1>yebobo <small>星星</small></h1>       # 主标题，副标题
<p class="lead text-center">lalalala</p>  # 居中
<abbr title="详细的解释">小朋友 你是啥子</abbr>   # 解释

<blockquote class="blockquote-reverse">      # 名人语句
  <p>啦啦啦啦啦</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

5. css、组件、js插件

# 这里只列出一些常用的插件，不一一全部列举
"""
1. 栅格布局（需要考虑到响应式布局也就是使用栅格参数）
以下都是需要布局好之后，将响应组件放到指定地方：
	2. 表格、表单、按钮
	3. <img src="..." class="img-responsive"> 响应式图片
	4. 导航、分页、列表组、面板
	5. 模态框、标签页
"""

6. 弹出框(漂亮样式)

  • sweetalert

7. 小案例(类似于左侧菜单栏特效)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>类似于左侧菜单栏</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
	</head>
	<style type="text/css">
		.logo {
			
			color: pink;
			/*text-align: center;*/
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
		.right {
			float: right;
		}
	</style>

	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="col-md-6 col-md-offset-3">
						<h2 class="text-center logo">retional shark</h2>
					</div>

					<div class="col-md-3" >
						<ul class="nav nav-tabs" style="margin-top: 10px;">
							<li role="presentation"><a href="#" class="right">信息</a></li>
							<li role="presentation"><a href="#" class="right">头像</a></li>
							<li role="presentation"><a href="#" class="right">用户名</a></li>
							<li role="presentation"><a href="#" style="float: right;">设置</a></li>
							<li role="presentation"><a href="#" style="float: right;">设置</a></li>
							
						</ul>
					</div>

				</div>

				
				<div class="col-md-1 col-md-3 c1" id="d1">
					<ul class="list-group">
						<li class="list-group-item"><a href="#">信息管理</a></li>
						<li class="list-group-item">
							<a href="#">可视化</a>
						</li>
						<li class="list-group-item">图像的数量</li>
						<li class="list-group-item">
							<span class="badge">新</span> 24*7 支持
						</li>
						<li class="list-group-item">每年更新成本</li>
						<li class="list-group-item">
							<span class="badge">新</span> 折扣优惠
						</li>
					</ul>
				</div>
				
				<div class="col-md-11 c2" id="d2">
					<button class="btn btn-default btn1">点击</button>
				</div>
			</div>
		</div>

		<script>
			$('.btn1').on('click', function() {
				$("#d1").toggleClass("col-md-1")
				if ($("#d1").hasClass("col-md-1")) {
					$("#d2").removeClass("col-md-9")
				} else {
					$("#d2").addClass("col-md-9")
				}
				$("#d3").toggleClass("col-md-1")
			})
//			$('#d1').hover(
//				function() {
//					$("#d1").removeClass("col-md-1")
//					$("#d2").addClass("col-md-9")
//				},
//				function() {
//					$("#d1").addClass("col-md-1")
//					$("#d2").removeClass("col-md-9")
//				}
//			)
		</script>
	</body>

</html>
这篇关于01 bootstrap 笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航