bootstrap列表:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<!--bootstrap列表-->
<ul class="list-inline">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
</body>
</html>
效果图:
bootstrap按钮:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<!--bootstrap按钮-->
<a class="btn btn-default" href="#" role="button">确定</a>
<button type="button" class="btn btn-danger" disabled="disabled">(危险)</button>
</body>
</html>
效果图:
bootstrap导航条:
<!--bootstrap导航条-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- 导航图标及汉堡按钮 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!-- 阅读器专用的样式 -->
<span class="sr-only">这是汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- 导航的主题部分 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">手机数码<span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#">电脑办公</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">我们的电话</a>
</li>
<li>
<a href="#">我们的宗旨</a>
</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>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入信息">
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
效果图:
bootstrap轮播图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<!--bootstrap轮播图-->
<!--data-interval代表轮播图自动切换时间-->
<!--若有多个轮播图需要赋予唯一id-->
<div id="lunbotu1" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- 定位小圆点 -->
<ol class="carousel-indicators">
<!-- data-target和上面的轮播图id一致 -->
<li data-target="#lunbotu1" data-slide-to="0" class="active"></li>
<li data-target="#lunbotu1" data-slide-to="1"></li>
<li data-target="#lunbotu1" data-slide-to="2"></li>
</ol>
<!-- 轮播图 图片主体部分 -->
<div class="carousel-inner" role="listbox">
<!--active表示先显示-->
<div class="item active">
<img src="img/图片一.jpg" alt="...">
<div class="carousel-caption">
这是图片一的说明信息
</div>
</div>
<div class="item">
<img src="img/图片二.jpg" alt="...">
<div class="carousel-caption">
这是图片二的说明信息
</div>
</div>
<div class="item">
<img src="img/图片三.jpg" alt="...">
<div class="carousel-caption">
这是图片三的说明信息
</div>
</div>
</div>
<!-- 左右控制按钮 -->
<!-- href也需要更改和轮播图id一致 -->
<a class="left carousel-control" href="#lunbotu1" 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="#lunbotu1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
效果图:
bootstrap排版:
<!--bootstrap排版-->
<div class="text-center">
今天天气好晴朗
</div>
bootstrap表单:
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<form class="form-horizontal">
<!-- 空格隔开 has-error表单表示正确的样式 -->
<div class="form-group has-success">
<label for="inputEmail3" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
</div>
</div>
<!-- has-error表单表示错误的样式 -->
<div class="form-group has-error">
<label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
效果图:
bootstrap分页:
<!--bootstrap分页-->
<nav>
<ul class="pagination">
<!--上一页-->
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- 索引页 -->
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<!--active激活状态-->
<li class="active">
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<!--下一页-->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
效果图:
最终集合:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<!--bootstrap列表-->
<ul class="list-inline">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
<!--bootstrap按钮-->
<a class="btn btn-default" href="#" role="button">确定</a>
<button type="button" class="btn btn-danger" disabled="disabled">(危险)</button>
<!--bootstrap导航条-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- 导航图标及汉堡按钮 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!-- 阅读器专用的样式 -->
<span class="sr-only">这是汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- 导航的主题部分 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">手机数码<span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#">电脑办公</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">我们的电话</a>
</li>
<li>
<a href="#">我们的宗旨</a>
</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>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入信息">
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--bootstrap轮播图-->
<!--data-interval代表轮播图自动切换时间-->
<!--若有多个轮播图需要赋予唯一id-->
<div id="lunbotu1" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- 定位小圆点 -->
<ol class="carousel-indicators">
<!-- data-target和上面的轮播图id一致 -->
<li data-target="#lunbotu1" data-slide-to="0" class="active"></li>
<li data-target="#lunbotu1" data-slide-to="1"></li>
<li data-target="#lunbotu1" data-slide-to="2"></li>
</ol>
<!-- 轮播图 图片主体部分 -->
<div class="carousel-inner" role="listbox">
<!--active表示先显示-->
<div class="item active">
<img src="img/图片一.jpg" alt="...">
<div class="carousel-caption">
这是图片一的说明信息
</div>
</div>
<div class="item">
<img src="img/图片二.jpg" alt="...">
<div class="carousel-caption">
这是图片二的说明信息
</div>
</div>
<div class="item">
<img src="img/图片三.jpg" alt="...">
<div class="carousel-caption">
这是图片三的说明信息
</div>
</div>
</div>
<!-- 左右控制按钮 -->
<!-- href也需要更改和轮播图id一致 -->
<a class="left carousel-control" href="#lunbotu1" 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="#lunbotu1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--bootstrap排版-->
<div class="text-center">
今天天气好晴朗
</div>
<!--bootstrap表单-->
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<form class="form-horizontal">
<!-- 空格隔开 has-error表单表示正确的样式 -->
<div class="form-group has-success">
<label for="inputEmail3" class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
</div>
</div>
<!-- has-error表单表示错误的样式 -->
<div class="form-group has-error">
<label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
<!--bootstrap分页-->
<nav>
<ul class="pagination">
<!--上一页-->
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- 索引页 -->
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<!--active激活状态-->
<li class="active">
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<!--下一页-->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</body>
</html>