Bootstrap
简介:=>
Bootstrap是Twitter公司开发的一款前端框架,包含HTML, css 和JS常见效果;
官网:
下载:
#download
目录结构:
css:bootstrap.css 和 bootstrap.min.css
fonts:字体文件(glyphicon)
js:bootstrap.js 和 bootstrap.min.js
引入文件:
1.引入jquery.js
2.引入Bootstrap->Bootstrap.css和Bootstrap.js
组件:
按钮:
btn:定义按钮的公共样式
btn-default:默认样式
btn-danger:危险样式
btn-warning:警告样式
btn-success:成功样式
btn-info:提示按钮
btn-primary:基础按钮
btn-lg:大按钮(lg=large)
btn-sm:小按钮(sm=small)
btn-ss:超小按钮(xs=eXtra Small)
btn-block:块级按钮(默认拉伸到父级元素100%的宽度)
代码演示:=>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Bootstrap</title>
<link href=”../../../bootstrap/css/bootstrap.css” rel =”stylesheet”>
</head>
<body>
<div class=”container”>
<h1>按钮样式</h1>
<hr>
<h3>按钮的三种DOM结构</h3>
<button class=”btn btn-default”>button按钮</button>
<input type=”button” value=”input按钮” class=”btn btn-default”>
<a href=”#” class=”btn btn-default”>链接按钮</a>
<h3>按钮的六种样式</h3>
<button class=”btn btn-default”>默认样式</button>
<button class=”btn btn-danger”>危险样式</button>
<button class=”btn btn-warning”>警告样式</button>
<button class=”btn btn-success”>成功样式</button>
<button class=”btn btn-info”>提示样式</button>
<button class=”btn btn-primary”>基础样式</button>
<h3>按钮的五种尺寸</h3>
<button class=”btn btn-info btn-lg”>大按钮</button>
<button class=”btn btn-info”>默认尺寸</button>
<button class=”btn btn-info btn-sm”>小按钮</button>
<button class=”btn btn-info btn-xs”>超小按钮</button>
<button class=”btn btn-info btn-block”>块级按钮</button>
</div>
<script src=”../../../jquery-3.3.1.min.js”></script>
<script src=”../../../bootstrap/js/bootstrap.js”></script>
</body>
—————————
图片:
img-round:圆角效果(border-radius:6px;)
img-circle:圆形效果(border-radius:50%;)
img-thumbnail:缩略图
img-responsive:响应式(width:100% height:auto)
代码演示:=>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Bootstrap</title>
<link href=”../../../bootstrap/css/bootstrap.css” rel=”stylesheet”>
</head>
<body>
<div>
<h1>图片样式</h1>
<hr>
<h3>原始图</h3>
<img src=”520.jpg”>
<h3>圆角效果</h3>
<img src=”520.jpg” class=”img-rounded”>
<h3>圆效果</h3>
<img src=”521.jpg” class=”img-circle”>
<h3>缩略图</h3>
<img src=”523.jpg” class=”img-thumbnail”>
<h3>响应式</h3>
<img src=”522.jpg” class=”img-responsive”>
</div>
<script src=”../../../jquery-3.3.1.min.js”></script>
<script src=”../../../bootstrap/js/bootstrap.js”></script>
</body>
——————————–
文本:
字体颜色:
text-danger:文本危险色
text-success:文本成功色
text-warning:文本警告色
text-info:文本提示色
text-primary:文本基础色
文本背景色:
bg-danger:文本危险色
bg-success:文本成功色
bg-warning:文本警告色
bg-info:文本提示色
bg-primary:文本基础色
文本对其方式:
text-left:左对齐
text-right:右对齐
text-center:居中对其
text-justify:两端对其
文本转换:
text-uppercase:字母大写
text-lowercase:字母小写
text-capitalize:首字母大写
代码演示:=>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Bootstrap</title>
<link href=”../../../bootstrap/css/bootstrap.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<h1>文本样式</h1>
<hr>
<h3>文本中的五种字体颜色</h3>
<p class=”text-danger”>危险色</p>
<p class=”text-success”>成功色</p>
<p class=”text-warning”>警告色</p>
<p class=”text-info”>提示色</p>
<p class=”text-primary”>基础色</p>
<h3>文本中的五种背景颜色</h3>
<p class=”text-danger bg-danger”>危险色</p>
<p class=”text-success bg-success”>成功色</p>
<p class=”text-warning bg-warning”>警告色</p>
<p class=”text-info bg-info”>提示色</p>
<p class=”text-primary bg-primary”>基础色</p>
<h3>文本的对齐方式</h3>
<p class=”text-left”>左对齐</p>
<p class=”text-right”>右对齐</p>
<p class=”text-center”>居中对齐</p>
<p class=”text-justify”>两端对齐</p>
<h3>文本转换</h3>
<p class=”text-uppercase”>hello Word</p>
<p class=”text-lowercase”>hello Word</p>
<p class=”text-capitalize”>hello Word</p>
</div>
<script src=”../../../jquery-3.3.1.min.js”></script>
<script src=”../../../bootstrap/js/bootstrap.js”></script>
</body>
—————————-
格栅系统:
col-md-数字:数字范围1-12,md-中等屏幕
屏幕尺寸:
col-xs(xs/sm/md/lg)超小屏幕 手机(<768px);
col-sm(sm/md/lg)小屏幕 pad(>=768px);
col-md(md/lg)中等屏幕 电脑(>=992px)
col-lg大屏幕 大的桌面系统显示器
偏移量:
col-[尺寸]-offset-[数字]
代码演示:=>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>05_gird</title>
<link href=”../../../bootstrap/css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
div {
border: 1px solid blue;
font-size: 18px;
}
</style>
</head>
<body>
<div class=”container”>
<h1>栅格系统的适用性</h1>
<hr>
<h3>xs(超小屏幕)的适用性</h3>
<div class=”row”>
<div class=”col-xs-6 bg-info”>xs-6</div>
</div>
<h3>sm(小屏幕)的适用性</h3>
<div class=”row”>
<div class=”col-sm-6 bg-info”>sm-6</div>
</div>
<h3>md(中等屏幕)的适用性</h3>
<div class=”row”>
<div class=”col-md-6 bg-info”>md-6</div>
</div>
<h3>lg(大屏幕)的适用性</h3>
<div class=”row”>
<div class=”col-lg-6 bg-info”>lg-6</div>
</div>
</div>
<script src=”../../../jquery-3.3.1.min.js”></script>
<script src=”../../../bootstrap/js/bootstrap.js”></script>
</body>
——————————–
面板(panel):
panel:公共样式
panel-[default|success|info|warning|danger|primary]六种样式;
组成部分:panel-heading panel-title:面板头部
panel-body:面板主体
panel-footer:面板尾部
代码演示:=>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>06_panel</title>
<link rel=”stylesheet” type=”text/css” href=”../../../bootstrap/css/bootstrap.css”>
</head>
<body>
<div class=”container”>
<h1>面板</h1>
<hr>
<h3>基本面板(三部分组成)</h3>
<div class=”panel panel-info”>
<div class=”panel-heading”>
<h3 class=”panel-title”>面板头部</h3>
</div>
<div class=”panel-body”>
面板主体
</div>
<div class=”panel-footer”>
面板尾部
</div>
</div>
</div>
<script src=”../../../jquery-3.3.1.min.js”></script>
<script src=”../../../bootstrap/js/bootstrap.js”></script>
</body>
