Bootstrap

77不吃香菜.

已于 2023-10-16 08:42:53 修改

阅读量24

点赞数

文章标签： bootstrap 前端 html

于 2023-10-15 22:04:41 首次发布

本文链接：https://blog.csdn.net/luna_H/article/details/133848610

版权

img-responsive响应式图片

img-rounde

img-circle圆形

img-thumbnail边框

×删除符号

close设置符号的位置

clearfix清除浮动

pull-left左浮动

pull-right右浮动

center-block盒子居中

text-hide隐藏

visible-lg大于等于1200可见

visible-md 大于等于992可见

visible-sm大于等于768可见

visible-xs小于768可见

与visible相反

hidden-lg hidden-md hidden-sm hidden-x

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<title></title>
		<style type="text/css">
			.box1 {
				width: 100px;
				height: 100px;
				border-top: 100px solid red;
				border-left: 100px solid transparent;
				border-right: 100px solid transparent;
				border-bottom: 100px solid transparent;
			}
			.box2 {
				width: 100px;
				height: 100px;
				border-top: 100px solid transparent;
				border-left: 100px solid orange;
				border-right: 100px solid transparent;
				border-bottom: 100px solid transparent;
			}
			.boss1 {
				height: 50px;
				background-color: #0000FF;
			}
			.boss2 {
				height: 50px;
				background-color: pink;
			}
			.boss3 {
				height: 50px;
				background-color: orange;
			}
		</style>
	</head>
	<body style="height: 2000px;">
		<!-- img-responsive响应式图片 -->
		<!-- <img src="../jq代码/zysy/zhonangabox.png" class="img-responsive" alt="Responsive image"> -->
		<!-- img-rounded圆角
		 img-circle圆形
		 img-thumbnail边框-->
		<!-- <img src="../psb.jpg1.jpg" alt="" class="img-rounded">
		<img src="../psb.jpg1.jpg" alt="" class="img-circle">
		<img src="../psb.jpg1.jpg" alt="" class="img-thumbnail"> -->
		
		<p class="text-muted h1">111</p>
		<p class="text-primary h1">222</p>
		<p class="text-success h1">333</p>
		<p class="text-info h1">444</p>
		<p class="text-warning h1">555</p>
		<p class="text-danger h1">666</p>
		<hr >
		<p class="bg-primary">...</p>
		<p class="bg-success">...</p>
		<p class="bg-info">...</p>
		<p class="bg-warning">...</p>
		<p class="bg-danger">...</p>
		<hr >
		<!-- &times;删除符号 -->
		<!-- close设置符号的位置 -->
		<button type="button" class="close">
			按钮
			<span>&times;</span>
		</button>
		<hr >
		<div>1111111111111111111111111</div>
		<span class="caret"></span>
		<!-- clearfix清除浮动 -->
		<div class="clearfix">
			<!-- pull-left左浮动
			 pull-right右浮动-->
			<div class="pull-left">11111111</div>
			<div class="pull-right">222222222</div>
		</div>
		<!-- center-block盒子居中 -->
		<div style="width: 100px;height: 30px;" class="center-block">
			123123123
		</div>
		<!-- <div>
			111
			<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
		</div> -->
		<h1 style="background-image: url(../jq代码/zysy/zhoanganagaysae2.png);" class="text-hide">Custom heading</h1>
		<!-- text-hide隐藏 -->
		<!-- <div class="text-hide">9999999999999999999</div> -->
		<div class="box1"></div>
		<div class="box2"></div>
		<hr >
		<!-- visible-lg大于等于1200可见
		 visible-md 大于等于992可见
		 visible-sm大于等于768可见
		 visible-xs小于768可见-->
		 <!-- 与visible相反
		 hidden-lg  hidden-md  hidden-sm  hidden-xs-->
		<div class="row">
			<div class="col-lg-4 visible-lg boss1">111111</div>
			<div class="col-lg-4 visible-lg boss2">222222</div>
			<div class="col-lg-4 visible-lg boss3">333333</div>
		</div>
	</body>
</html>