javaWeb-day05-Bootstrap

最新推荐文章于 2022-08-18 21:39:46 发布
最新推荐文章于 2022-08-18 21:39:46 发布
阅读量168 收藏
点赞数
分类专栏： javaWeb 文章标签： html bootstrap css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingxing_LM/article/details/113829347
版权

Bootstrap：

1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
	* 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
	* 好处：
		1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
		2. 响应式布局。
			* 同一套页面可以兼容不同分辨率的设备。


2. 快速入门
	1. 下载Bootstrap
	2. 在项目中将这三个文件夹复制
	3. 创建html页面，引入必要的资源文件


	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>Bootstrap HelloWorld</title>
	
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
	
	
	    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	    <script src="js/jquery-3.2.1.min.js"></script>
	    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	    <script src="js/bootstrap.min.js"></script>
	</head>
	<body>
	<h1>你好，世界！</h1>
	
	</body>
	</html>

响应式布局

* 同一套页面可以兼容不同分辨率的设备。
* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
* 步骤：
	1. 定义容器。相当于之前的table、
		* 容器分类：
			1. container：两边留白
			2. container-fluid：每一种设备都是100%宽度
	2. 定义行。相当于之前的tr   样式：row
	3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
		* 设备代号：
			1. xs：超小屏幕 手机 (<768px)：col-xs-12
			2. sm：小屏幕 平板 (≥768px)
			3. md：中等屏幕 桌面显示器 (≥992px)
			4. lg：大屏幕 大桌面显示器 (≥1200px)

	* 注意：
		1. 一行中如果格子数目超过12，则超出部分自动换行。
		2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
		3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

CSS样式和JS插件

1. 全局CSS样式：
	* 按钮：class="btn btn-default"
	* 图片：
		*  class="img-responsive"：图片在任意尺寸都占100%
		*  图片形状
			*  <img src="..." alt="..." class="img-rounded">：方形
			*  <img src="..." alt="..." class="img-circle"> ： 圆形
			*  <img src="..." alt="..." class="img-thumbnail"> ：相框
	* 表格
		* table
		* table-bordered
		* table-hover
	* 表单
		* 给表单项添加：class="form-control" 
2. 组件：
	* 导航条
	* 分页条
3. 插件：
	* 轮播图

在这里插入图片描述
在这里插入图片描述

1. helloword

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWord</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<h1>你好，世界！</h1>
</body>
</html>

2.Bootstrap-栅格系统

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWord</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .inner{
            border: 1px red solid;
        }
    </style>
</head>
<body>
<!--1.定义容器-->
<div class="container-fluid">
    <!--    2.定义行-->
    <div class="row">
    <!--    3.定义元素
        大屏显示12个元素
        小屏显示6个元素-->
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>


</div>
</div>
</body>
</html>

3.Bootstrap-CSS样式–按钮、图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWord</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<a  href="#" role="button">Link</a>
<button type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

<hr>
<!-- 标准按钮样式-->
<button type="button" class="btn btn-default btn-lg">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
<hr>
<img src="img/01.jpg" class="img-responsive" alt="Responsive image">
<img src="img/01.jpg" class="img-responsive img-rounded">
<img src="img/01.jpg" class="img-responsive img-circle">
<img src="img/01.jpg" class="img-responsive img-thumbnail">
</body>
</html>

4.Bootstrap-CSS样式–表格、表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWord</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<table class="table table-striped table-bordered table table-hover ">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>电话</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张</td>
        <td>123</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李</td>
        <td>123</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王</td>
        <td>123</td>
    </tr>
</table>

<hr>
<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>
</body>
</html>

5.Bootstrap-组件-导航条

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <!-- 定义汉堡按钮 -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">首页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<nav>
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><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">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

<nav>
    <ul class="pagination">
        <li class="disabled">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><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">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</body>
</html>

6.Bootstrap-轮播图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWord</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img/banner_1.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_2.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_3.jpg" alt="...">
        </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" 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>

7.Bootstrap-案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWord</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .paddtop{
            padding-top: 10px;
        }
        .search-input{
            float: left;
            border: 2px solid #ffc900;
            width: 400px;
            height: 35px;
            padding-left: 5px;
            margin-top: 15px;
        }
        .search-btn{
            float: left;
            border: 2px solid #ffc900;
            width: 90px;
            height: 35px;
            background-color: #ffc900;
            text-align: center;
            line-height: 35px;
            margin-top: 15px;
        }
        .jx{
            padding-top: 15px;
            border-bottom: 2px solid #ffc900;
        }
        .company{
            background-color: #ffc900;
        }
    </style>
</head>
<body>
<!--1.页眉部分-->
<header>
    <div class="container-fluid">
<!--        1-->
        <div class="row"><img src="img/top_banner.jpg" class="img-responsive"></div>
<!--        2-->
        <div class="row paddtop">
        <div class="col-md-3"><img src="img/logo.jpg"></div>
        <div class="col-md-5"><input class="search-input" placeholder="请输入路线名称">
        <a class="search-btn" href="#">搜索</a>
        </div>
        <div class="col-md-4"><img src="img/hotel_tel.png"></div>
        </div>
<!--        3-->
        <div class="row">
            <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>

                    </ul>

                    <ul class="nav navbar-nav">
                        <li><a href="#">Link</a></li>

                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav></div>
<!--        4-->
        <div class="row">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="img/banner_1.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="img/banner_2.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="img/banner_3.jpg" alt="...">
                    </div>

                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" 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>
</header>

<!--2.主体部分-->
<!--不带fluid的两边有留白-->
<div class="container">
    <div class="row jx"><img src="img/icon_5.jpg"><span>河马精选</span></div>
    <div class="row paddtop">
        <div class="col-md-3">
            <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                <p>那就是奥力给啊啊啊啊</p>
                <font color="red">&yen;899</font></div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                <p>那就是奥力给啊啊啊啊</p>
                <font color="red">&yen;899</font></div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                <p>那就是奥力给啊啊啊啊</p>
                <font color="red">&yen;899</font></div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                <p>那就是奥力给啊啊啊啊</p>
                <font color="red">&yen;899</font></div>
        </div>

    </div>
    <div class="row jx"><img src="img/icon_6.jpg"><span>国内游</span></div>
    <div class="row paddtop">
        <div class="col-md-4">
            <img src="img/guonei_1.jpg">
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                        <p>那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊</p>
                        <font color="red">&yen;899</font></div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                        <p>那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊</p>
                        <font color="red">&yen;899</font></div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                        <p>那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊</p>
                        <font color="red">&yen;899</font></div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                        <p>那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊</p>
                        <font color="red">&yen;899</font></div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                        <p>那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊</p>
                        <font color="red">&yen;899</font></div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail"> <img src="img/jiangxuan_1.jpg" alt="">
                        <p>那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊那就是奥力啊啊啊啊</p>
                        <font color="red">&yen;899</font></div>
                </div>
            </div>
        </div>
    </div>

</div>

<!--3.页脚部分-->
<footer class="container-fluid">
    <div class="row"><img src="img/footer_service.png" class="img-responsive"></div>
    <div class="row company">
        <center><font color="gray" size="2">江苏传智播客教育科技股份有限公司<br>
            版权所有Copyright 2006-2018&copy;, All Rights Reserved 苏ICP备16007882</font></center>
    </div>
    
</footer>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

grilla1024
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb-day01-数据库基础.xmind
11-05
JavaWeb-day01-数据库基础.xmind
Bootstrap基础介绍(附案例)
weixin_44197120的博客
01-28 261
文章目录网站：1. Bootstrap概念2. 快速入门3. 响应式布局4. CSS样式和JS插件5. 案例 网站： Bootstrap中文文档 1. Bootstrap概念 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 好处： 定义了很多的css样式和js插件。我们开发人员
BootStrap的介绍与案例使用
热门推荐
苏凯的博客
09-06 1万+
BootStrap的介绍与案例使用 1.案例一:使用Bootstrap重写网站首页 1.1案例介绍 本案例使用Bootstrap重写首页，整个案例中将使用到Bootstrap 中的各个模块。为了方便编程，将采用拆分的方式，各个模块单独编写，最后组合。 1.2案例相关技术 1.2.1Boo...
BootStrap简单学习
秋雨绵绵
03-04 1308
本文是关于BootStrap的简单学习，适合后端开发者查阅。
Bootstrap环境搭建及常用内容
zhangyuliang6430的博客
04-21 365
Bootstrap官网 官网：https://getbootstrap.com/ 中文网：http://www.bootcss.com/ 首先，观察Bootstrap文件树（下图）不难发现，文件都是我们常见的一些css、js文件。 压缩版文件树： 源码包文件树： Bootstrap为我们写好测试了各种兼容、疑难问题，并构建了一套非常优秀成熟的响应式类，并及时提供了移动端优先的响应式系统，我们只...
BootStrap
weixin_30784501的博客
04-08 76
1:下载网站:http://v3.bootcss.com/ 2:下载：用于生产环境的BootStrap 3：（1）加载 Bootstrap 的层叠样式表： <link href="css/bootstrap.min.css" rel="stylesheet"> （2）.Jquery库，同时加载该库必须在加载bootstrap.min.js之前 <script src=...
JavaWeb视频教程-day10
最新发布
04-25
而"javaweb-day10-day10剪切摘要.txt"可能是课程的总结或重要笔记，整理了本节课程的重点内容。 通过深入学习和理解这些内容，学习者能够具备独立开发JavaWeb应用的能力，为后续的进阶学习打下坚实的基础。同时，...
javaweb-demo
09-27
【JavaWeb-Demo详解】 JavaWeb技术是Java平台上的一个重要组成部分，主要用于开发和构建Web应用程序。这个名为"javaweb-demo"的项目很可能是用来演示JavaWeb应用的基础架构和核心功能。下面，我们将深入探讨JavaWeb...
Javaweb--狂神版
12-26
JavaWeb是Java技术在Web应用开发中的一个重要领域，它涵盖了从服务器端编程、数据库交互到网页动态内容生成等多方面的技术。"狂神版"很可能指的是由某位知名讲师或专家整理的一套JavaWeb学习资源，这个压缩包可能...
JavaWeb视频教程-day08
04-25
在本节"JavaWeb视频教程-day08"中，我们将深入学习JavaWeb开发的核心概念和技术。这个阶段的课程主要关注于在实际项目中常见的应用场景，包括但不限于Servlet、JSP、MVC模式以及数据库操作等。以下是一些关键知识点...
BootStrap教程（案例+中文文档+完整插件）
06-16
BootStrap教程，包含案例、中文文档、完整插件适合初学者
JavaWeb基础（3）---------BootStrap以及XML知识点首次整理
учёба
08-26 198
BootStrap 概念：一个前端开发的框架，基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 用途 1.定义了和多的css样式和js插件，可以直接使用这些样式和插件得到丰富的页面效果。 2.响应式布局：同一套页面可以兼容不同分辨率的设备。 使用 1.下载Bootstrap 2.在项目中将BootStrap里面的三个文件夹：css、fonts、js，复制进项目中，以及Jq
BootStrap快速入门
康世行
02-07 2796
概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套页面可以兼容不同分辨率的设备。 目录 快速入门： 环境设置： ...
BootStrap实现商城首页
m0_37286282的博客
09-10 1万+
BootStrap作为一个JS框架，在web开发上带来的便捷实在太大了。如图 这是个特别方便的文档，可以下载离线，也可以在官网上直接用。 附上一个效果图及自己的代码： 效果图就是这样，有很多框架就是直接官网模板复制过来简单的修改一下，而且很美观。 Bootstrap 101 Template
bootstrap起步文件
延宾的博客
04-11 309
lang="zh-CN"> charset="utf-8"> http-equiv="X-UA-Compatible" content="IE=edge"> name="viewport" content="width=device-width, initial-scale=1"> Bootstrap 101 Template
JAVA从零开始学习知识整理——HTML——day05—【Bootstrap】
weixin_44167508的博客
01-26 263
一、Bootstrap 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插...
Bootstrap下载以及入门小案例
05-29 4149
目录 1.下载bootstrap3（推荐用版本3） 2 开发工具Hbuilder 3 新建前端项目 4.源代码 5.运行结果： 6. Bootstrap示例网站 1.下载bootstrap3（推荐用版本3） http://www.bootcss.com/ 点开其中的CSS文件夹，会看到有以下文件，其实bootstrap.css和bootstrap.min....
Bootstrap框架菜鸟入门教程
weixin_30648587的博客
09-16 1098
Bootstrap菜鸟入门教程 Bootstrap简介 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 一、栅格系统 ...
Bootstrap简述
weixin_71437031的博客
08-18 2854
栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.co-/g-和.col-xl*类名。组件可以有自己的属性和方法。由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。...
"JavaWeb-SSM-超市管理系统.docx精品文档
本文是关于JavaWeb-SSM-超市管理系统的项目文档，该项目是南阳理工学院软件学院移动1班2018年12月完成的一个实验，旨在实现浏览器和服务器的交互，实现对超市管理系统的基本功能，包括浏览商品信息、购物车管理、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值