day02-01-图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<img src="img/1.gif" class="img-rounded" alt="">
<img src="img/1.gif" class="img-circle" alt="">
<img src="img/1.gif" class="img-thumbnail" alt="">
<div style="width: 200px; height: 200px; background: #ff0000;">
<img src="img/2.gif" alt="">
</div>
<div style="font-size: 0;">
<img src="img/01.jpg" alt="">
</div>
<div>
<img src="img/banner.jpg" class="img-responsive" alt="">
</div>
</body>
</html>
day02-02-栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<img src="img/1.gif" alt="">
</div>
<div class="container-fluid">
<img src="img/1.gif" alt="">
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">1</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">2</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">3</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">4</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">5</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">6</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2">左边</div>
<div class="col-lg-10">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">1</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">2</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">3</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">4</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">5</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">6</div>
</div>
</div>
</div>
</div>
</body>
</html>
day02-03-辅助类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<p class="text-muted">柔和灰色</p>
<p class="text-primary">主要蓝色</p>
<p class="text-info">信息蓝色</p>
<p class="text-success">成功绿色</p>
<p class="text-warning">警告黄色</p>
<p class="text-danger">危险红色</p>
<p class="bg-primary">主要蓝色</p>
<p class="bg-info">信息蓝色</p>
<p class="bg-success">成功绿色</p>
<p class="bg-warning">警告黄色</p>
<p class="bg-danger">危险红色</p>
<div class="container">
<button type="button" class="close">x</button>
</div>
<span class="caret"></span>
<style>
.sanjiao {
display: block;
width: 0;
height: 0;
border: 20px solid #ff0000;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-top: 0;
}
</style>
<span class="sanjiao"></span>
<div class="pull-left">左浮动</div>
<div class="pull-right">右浮动</div>
<div class="clearfix"></div>
<div class="center-block text-center" style="width:200px;background:#ff0000">块级居中</div>
<div class="hidden">隐藏</div>
<div class="hide">隐藏</div>
<div style="display: none;" class="show">显示</div>
<div class="hidden-xs">能不能看到我呢?</div>
<div style="display:none" class="visible-xs-block">在吗?</div>
</body>
</html>
day02-04-图标菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<i class="glyphicon glyphicon-star-empty text-primary"></i>
<i class="glyphicon glyphicon-upload text-danger"></i>
<button class="btn btn-default">
上传
<i class="glyphicon glyphicon-upload"></i>
</button>
<button class="btn btn-primary">
上传
<i class="glyphicon glyphicon-upload"></i>
</button>
<button class="btn btn-danger">
上传
<i class="glyphicon glyphicon-upload"></i>
</button>
</body>
</html>
day02-05-下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
标题
</li>
<li class="divider"></li>
<li>
<a href="">首页</a>
</li>
<li class="divider"></li>
<li>
<a href="">分类页</a>
</li>
<li class="divider"></li>
<li>
<a href="">新闻页</a>
</li>
</ul>
</div>
<div class="dropup">
<button class="btn btn-primary" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">分类页</a>
</li>
<li>
<a href="">新闻页</a>
</li>
</ul>
</div>
<div class="dropdown open">
<button class="btn btn-primary" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="disabled">
<a href="">首页</a>
</li>
<li>
<a href="">分类页</a>
</li>
<li>
<a href="">新闻页</a>
</li>
</ul>
</div>
</body>
</html>
day02-06-按钮组组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="btn-group">
<button class="btn btn-default">上一页</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">下一页</button>
</div>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">上一页</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">下一页</button>
</div>
<div class="btn-group">
<button class="btn btn-default">上一页</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">下一页</button>
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn btn-default">上一页</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">下一页</button>
</div>
<div class="btn-group">
<button class="btn btn-default">上一页</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">下一页</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default">上一页</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">下一页</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-default">上一页</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">下一页</button>
</div>
<div class="btn-group btn-group">
<button class="btn btn-default">上一页</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">下一页</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
跳转到
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">首页</a></li>
<li><a href="">第10页</a></li>
<li><a href="">尾页</a></li>
</ul>
</div>
</div>
<div class="btn-group-vertical">
<button class="btn btn-default">上一页</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">下一页</button>
</div>
<div class="btn-group-justified">
<div class="btn-group">
<button class="btn btn-default">上一页</button>
</div>
<div class="btn-group">
<button class="btn btn-default">1</button>
</div>
<div class="btn-group">
<button class="btn btn-default">尾页</button>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>首页</li>
<li>资讯</li>
<li>产品</li>
<li>关于</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default">下拉菜单</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>首页</li>
<li>资讯</li>
<li>产品</li>
<li>关于</li>
</ul>
</div>
</body>
</html>
day02-07-输入框组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="input-group input-group-lg">
<span class="input-group-addon">¥</span>
<input type="text" class="form-control">
<span class="input-group-addon">元</span>
</div>
<div class="input-group">
<span class="input-group-addon">¥</span>
<input type="text" class="form-control">
<span class="input-group-addon">元</span>
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">¥</span>
<input type="text" class="form-control">
<span class="input-group-addon">元</span>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default">按钮</button>
</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">网站导航</li>
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li class="divider"><a href="#">产品</a></li>
<li class="disabled"><a href="#">关于</a></li>
</ul>
</span>
<input type="text" class="form-control">
</div>
</body>
</html>
day02-08-导航组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li><a href="">首页</a></li>
<li class="active"><a href="">分类</a></li>
<li><a href="">购物车</a></li>
<li><a href="">我的</a></li>
</ul>
<ul class="nav nav-pills">
<li><a href="">首页</a></li>
<li class="active"><a href="">分类</a></li>
<li><a href="">购物车</a></li>
<li><a href="">我的</a></li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li><a href="">首页</a></li>
<li class="active"><a href="">分类</a></li>
<li><a href="">购物车</a></li>
<li><a href="">我的</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
<li><a href="">首页</a></li>
<li class="active"><a href="">分类</a></li>
<li><a href="">购物车</a></li>
<li><a href="">我的</a></li>
</ul>
<ul class="nav nav-tabs nav-justified">
<li class="disabled"><a href="">首页</a></li>
<li class="active"><a href="">分类</a></li>
<li><a href="">购物车</a></li>
<li><a href="">我的</a></li>
</ul>
<ul class="nav nav-tabs">
<li><a href="">首页</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">
分类
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="">男装女装</a></li>
<li><a href="">家用电器</a></li>
<li><a href="">其他</a></li>
</ul>
</li>
<li><a href="">购物车</a></li>
<li><a href="">我的</a></li>
</ul>
</body>
</html>
day02-09-导航条组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="">首页</a></li>
<li class="active"><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li>
<form action="" class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">提交</button>
</span>
</div>
</form>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-static-top"> </nav>
</body>
</html>