JavaWeb CSS框架——BootStrap

最新推荐文章于 2024-04-26 18:25:14 发布

陌凨107

最新推荐文章于 2024-04-26 18:25:14 发布

阅读量616

点赞数

本文链接：https://blog.csdn.net/west_xia_616/article/details/79852204

版权

CSS框架

概念：

CSS框架是一系列CSS文件的集合体。包含了基本的元素重置、页面排版、网格布局、表单样式、通用规则等代码块，用于简化web前端开发的工作，提高工作效率。

产生原因

1、提高CSS代码重用效率，基础的代码不需要重写编写

2、提供统一而规范的css编码规则，有利于团队协作

3、浏览器兼容性好

BootStrap介绍

BootStrap是当前比较流行的CSS框架之一，它是Teitter推出的一个用于前端开发的开源工具包。

优点：

1、企业开发多使用某种CSS框架，其中以BootStrap为目前使用居多

2、有利于学习和理解其它框架

eg：第一个BootStrap页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="view-port" content="width=device-width,initial-scale=1">
	<title>Hello BootStrap</title>
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<!-- 添加IE8支持 -->
	<!--[if lt IE 9]>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>Hello,Welcome to learn BootStrap!</h1>
</body>
</html>

页面显示：

BootStrap基本样式-栅格

12列布局介绍

BootStrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。也就是通过定义容器大小，平均分为12份（也有平均分为24份或32份，但12份是最常见的）。

屏幕尺寸介绍

栅格基本使用方式

1、使用.container(1170px)或container-fluid包裹

2、列应当包含在行“row”中

3、列的基本格式：（col-屏幕大小-数字）

<div class="container">
    <div class="row">
         <div class="col=md-3" style="background-color:#ddd">col-3</div>
         <div class="col=md-9" style="background-color:red">col-9</div>
    </div>
</div>

4、一行多余12列时将自动换行

5、列偏移

.col-md-offset-n:向右偏移N列

6、嵌套列

在一个col下在使用row产生一个或多个行

eg1：栅格使用方式展示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="view-port" content="width=device-width,initial-scale=1">
	<title>Hello BootStrap</title>
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<!-- 添加IE8支持 -->
	<!--[if lt IE 9]>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-3" style="background-color: red">col-3</div>
			<div class="col-md-6" style="background-color: yellow">col-3</div>
			<div class="col-md-3" style="background-color: red">col-3</div>
		</div>
		<div class="row">
			<div class="col-md-3" style="background-color: blue">col-3</div>
			<div class="col-md-3" style="background-color: red">col-3</div>
			<div class="col-md-3" style="background-color: green">
			col-3</div>
			<div class="col-md-3" style="background-color: yellow">col-3</div>
		</div>
		<div class="row">
			<div class="col-md-6 col-md-offset-3" style="background-color: orange">
				<div class="row">
					<div class="col-md-4" style="background-color: gray">col-4</div>
					<div class="col-md-8" style="background-color: pink">col-8</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6" style="background-color: red">col-3</div>
			<div class="col-md-8" style="background-color: yellow">col-3</div>
		</div>
	</div>
</body>
</html>

结果显示：

排版

基本html标签样式

h1-h6、p、mark、del、strong

文本对齐

text-left、text-right、text-center、text-nowrap

列表

list-unstyled：去掉标记

list-inline：将li显示在一行

eg：排版使用方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="view-port" content="width=device-width,initial-scale=1">
	<title>Hello BootStrap</title>
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<!-- 添加IE8支持 -->
	<!--[if lt IE 9]>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-6 col-md-offset-3 text-center" style="background-color: orange">
				<div class="row">
					<div class="col-md-4" style="background-color: red">col-4</div>
					<div class="col-md-8" style="background-color: yellow">col-8</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-3">
				<ol class="list-unstyled">
					<li>Java</li>
					<li>C++</li>
				</ol>
			</div>
			<div class="col-md-3">
				<ul class="list-inline">
					<li>Java</li>
					<li>C++</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

显示结果：

表格样式

table:基本样式

table-striped：条纹表格

table-bordered：带边框表格

table-hover：鼠标悬停

table-condensed：紧缩表格

状态类，可以给单元格设置颜色：

.active、.class、.info、.warning、.danger

相应式表格：table-responsive

表单样式

表单基本样式

表单其他样式

form-inline：内联表单

form-horizontal：水平标签

按钮

btn：显示为一个按钮，用于button元素或其他元素

颜色：btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、btn-link

尺寸：btn-lg、btn-sm、btn-xs、btn-block

disabled：禁用

图片

响应式图片：img-responsive

图片形状：img-rounded、img-circle、img-thumbnail

eg：绘制一个表格，让其中的两个单元格呈现不同的颜色，并且显示鼠标悬停在上的样式，表的下面是文本框和按钮

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="view-port" content="width=device-width,initial-scale=1">
	<title>Hello BootStrap</title>
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<!-- 添加IE8支持 -->
	<!--[if lt IE 9]>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<table class="table table-hover">
					<tr>
						<th>标题</th>
						<th>标题</th>
						<th>标题</th>
						<th>标题</th>
					</tr>
					<tr>
						<td class="success">1</td>
						<td>1</td>
						<td class="info">1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
					</tr>
				</table>
			</div>	
		</div>
		<div class="row">
			<div class="col-md-12">
				<form name="form1" role="form" class="form-inline">
					<div class="form-group">
						<label for="xingming">命名：</label>
						<input type="text" id="姓名" class="form-control" value="1">
					</div>
					<div class="form-group">
						<label for="mima">密码：</label>
						<input type="password" id="姓名" class="form-control" value="1">
					</div>
					<button type="button" class="btn btn-primary">保存</button>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

显示结果：

辅助工具（颜色）

文字颜色

text-muted、text-primary、text-success、text-info、text-warning、text-danger

背景颜色

bg-muted、bg-primary、bg-success、bg-info、bg-warning、bg-danger

位置

浮动

pull-xx:right:xxx%

push-xx:left:xxx%

dearfix

内容居中

center-block

显示或隐藏

show

hidden

响应式工具

visible-xs-* 可见

hidden-xs 隐藏

BootStrap组件

下拉菜单
dropdown
dropdown-menu
dropdown-header：不可点击的菜单
按钮组
button-group
btn-group-vertical:垂直排列
导航
nav
nav-tabs：标签式导航
nav-pills:胶囊式导航

导航条
navbar
navbar-brand：品牌图标
navbar-btn：导航按钮
navbar-text:导航文本
navbar-left/navbar-right:元素居左/居右
navbar-fixed-top：固定在顶部
navbar-fixed-bottom：固定在底部
navbar-default：反色
路径导航
breadcrumb：

分页
pagination：
路径导航
breadcrumb：
标签
label
label-default
label-primary
label-success
label-info
label-warning
label-danger

徽章
badge
巨幕
jumbotron ：
缩略图
thumbnail ：
列表
list-group：
list-group-item:列表项
list-group-item-heading
list-group-item-text

面板
panel
panel-heading
panel-title
panel-body：
panel-footer
panel-primary
panel-success
panel-info
panel-warning
panel-danger

Panel和其它元素的组合

eg：下拉菜单以、导航条及按钮组

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="view-port" content="width=device-width,initial-scale=1">
	<title>Hello BootStrap</title>
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<!-- 添加IE8支持 -->
	<!--[if lt IE 9]>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu1">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand">网站名称</a>
			</div>
			<div class="collapse navbar-collapse" id="menu1">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">公司简介</a></li>
					<li class="dropdown">
						<a href="#" data-toggle="dropdown">产品目录<span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">产品1</a></li>
							<li><a href="#">产品2</a></li>
						</ul>
					</li>
				</ul>
				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="text" class="form-control" placeholder="请输入关键字">
					</div>
					<button type="submit" class="btn btn-default">搜搜</button>
				</form>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">登录</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<button type="button" class="btn btn-default" data-toggle="dropdown">下拉菜单<span class="caret"></span></button>
				<ul class="dropdown-menu">
					<li><a href="#">子菜单1</a></li>
					<li><a href="#">子菜单2</a></li>
					<li><a href="#">子菜单3</a></li>
					<li><a href="#">子菜单4</a></li>
				</ul>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
			    <div class="btn-group">
			        <button type="button" class="btn btn-default">left</button>
			        <button type="button" class="btn btn-default">middle</button>
			        <button type="button" class="btn btn-default">right</button>
			    </div>
			</div>
		</div>
	</div>
</body>
</html>

显示结果：

将浏览器宽度调小后，只显示网站名称，其余的隐藏在右边按钮中，如下图所示

JavaScript插件

模态框

data方式调用
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
js方式调用
$('#myModal').modal(options)

标签页

data方式调用
<li role="presentation" class="active"><a href="#home" aria=controls="home" role="tab" data-toggle="tab"></a></li>
js方式调用
$('#someTab').tab('show')
事件
show.bs.tab 显示前触发（2）
shown.bs.tab 显示后触发（4）
hide.bs.tab 隐藏前触发（1）
hidden.bs.tab 隐藏后触发（3）

轮播图

data方式调用
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"></div>
js方式调用
$('.carousel').carousel()

eg1：利用模态框实现一个“打开会话框”的功能

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="view-port" content="width=device-width,initial-scale=1">
	<title>Hello BootStrap</title>
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<!-- 添加IE8支持 -->
	<!--[if lt IE 9]>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开会话框</button>
				<div class="modal" id="myModal">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
								<h4 class="modal-title">标题</h4>
							</div>
							<div class="modal-body">
								<h3 class="modal-body">内容</h3>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" data-dismiss="modal"><span>关闭</span></button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

运行效果：

点击右上角的"x"和右下角的“关闭按钮”都能将这个会话框关闭

eg2：轮播图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="view-port" content="width=device-width,initial-scale=1">
	<title>Hello BootStrap</title>
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<!-- 添加IE8支持 -->
	<!--[if lt IE 9]>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
	<![endif]-->
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
	<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12" style="background-color: #4169E1">
				<div class="carousel slide" data-ride="carousel" id="recycle">
					<ol class="carousel-indicators">
						<li data-target="#recycle" data-slide-to="0" class="active"></li>
						<li data-target="#recycle" data-slide-to="1" class="active"></li>
						<li data-target="#recycle" data-slide-to="2" class="active"></li>
					</ol>
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="./img/1.jpg"/>
						</div>
						<div class="item">
							<img src="./img/2.jpg"/>
						</div>
						<div class="item">
							<img src="./img/3.jpg"/>
						</div>
						<a class="left carousel-control" href="#recycle" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#recycle" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

陌凨107

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb CSS框架——BootStrap

CSS框架概念： CSS框架是一系列CSS文件的集合体。包含了基本的元素重置、页面排版、网格布局、表单样式、通用规则等代码块，用于简化web前端开发的工作，提高工作效率。产生原因1、提高CSS代码重用效率，基础的代码不需要重写编写2、提供统一而规范的css编码规则，有利于团队协作3、浏览器兼容性好BootStrap介绍BootStrap是当前比较流行的CSS框架之一，它是Teitter推...
复制链接

扫一扫