利用bootstrap建立一个旅游网站页面（html做一个旅游网站）

qiaoqingyi 2023-02-25 816

默认

本篇文章给大家谈谈利用bootstrap建立一个旅游网站页面，以及html做一个旅游网站对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、怎么样使用bootstrap快速开发一个简单的前
2、bootstrap 网页实例常用样式
3、使用bootstrap怎么实现一个页面多选项卡，每个选项卡都是页面
4、如何用 bootstrap 创建一个网站

怎么样使用bootstrap快速开发一个简单的前

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

最近空余时间比较多，今天先给大家介绍一个前端“样式”框架——Bootstrap。

一、Bootstrap 整体架构

为什么在引言我称为Bootstrap为一个前端样式框架呢？可能这样的称谓并不是很准确，但是我觉得这样的称呼可以让一些初学者可以更快明白和明白Bootstrap到底是一个什么东西。我总结东西不喜欢用一些高大上的词语来加深某个知识的理解，反而更喜欢用一些大家通俗易懂的词语来描述知识点。虽然这样的描述方式可能会有点不准确，但是我觉得则没什么大不了的，因为这样的描述确实可以让初学者更快理解这个知识。因为我在学习知识点的时候就有这样的困惑，有些知识官方文档都说的高大上，其实说白了也就是以前的一些东西，然后进行封装使得开发更加简单和快速罢了。所以这里我分享Bootstrap框架也是这样的。并且内容组织方面也是为了让初学者更好地掌握。因为我刚开始接触的时候也是一个初学者。我自认为这样的组织方式可以更快更好地理解知识。

对于Bootstrap，首先要介绍而是它的整体架构——它到底由什么组成的。相信大家看下面一张图就可以很快明白Bootstrap中具体由哪些东西组成的。

从上面的图，可以清楚看到，Bootstrap主要有下面几部分组成：

12栅格系统——就是将屏幕平分12份（列）。

使用行(row)来组织元素（每一行都包括12个列），然后将内容放在列内。

通过col-md-offset-*来控制列偏移。

基础布局组件——Bootstrap提供了多种基础布局组件。如排版、代码、表格、按钮、表单等。

Jquery——Bootstrap所有的JavaScript插件都依赖于Jquery的。如果要使用这些JS插件，就必须引用Jquery库。这也是为什么我们在除了要引用Bootstrap的JS文件和CSS文件外，还需要引用Jquery库的原因，两者是依赖关系。

CSS组件——Bootstrap为我们预实现了很多CSS组件。如下拉框、按钮组、导航等。也就是说Bootstrap内容帮我们定义好了很多CSS样式，你可以将这些样式直接应用到之前的下拉框等元素里。

JavaScript插件——Bootstrap也为我们实现了一些JS插件，我们可以用其提供的插件要完成一些常用功能，而不需要我们再重新写JS代码来实现像提示框，模态窗口这样的效果了。

响应式设计——这就是一个设计理念。响应式的意思就是它会根据屏幕尺寸来自动调整页面，使得前端页面在不同尺寸的屏幕上都可以表现很好。

Bootstrap就是由上面几部分组成的。上面已经都每个组成部分做了一个简单的介绍，接下来的内容无非是通过一些实例来对每个组成部分进行一个详细的介绍罢了。

二、12栅格系统

Bootstrap定义12栅格系统，就是为了更好的布局。每个前端框架都首先要定义好的就是布局系统。在Bootstrap里面，就是利用行和列来创建页面布局的。其布局有几个原则：

行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中

每行都包含12列

将内容放置在每列中　

在bootstrap的栅格系统中，根据宽度将浏览器分为4种。其值分别是：自动（100%）、750px、970px、 1170px。

对应的样式为超小（xs）、小型（sm）、中型屏幕（md）、大型（lg）

其本就是通过媒体查询定义最小宽度实现。所以，Bootstrap做出来的网页向大兼容，向小不兼容！

在Bootstrap框架内，已预先定义好了屏幕大小的分界值，其分界值得定义就是通过媒体查询来定义的。其定义方式如下：

/* 超小屏幕（手机，小于 768px） */

/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { ... }

其实Win8应用开发中也应用了媒体查询来实现可响应式的应用。所以大家以后如果听到了可响应系统不要觉得很高深哦，其实就是框架为我们定义了媒体查询，如果超过了媒体查询中定义的最小宽度对应某个类型屏幕，通过这样的方式，就可以在不同屏幕之间收缩元素大小来适应屏幕。然而Bootstrap提出的概念是移动设备优先的，所以Bootstrap设计出来的页面只能向大兼容，向小不兼容。

三、基础布局组件

基础布局组件就是Bootstrap框架内为一些基础布局的标签定义了一些统一的样式。如Table、按钮、表单等。下面让我们看一个Table的例子：

!DOCTYPE html

html

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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --

titleBootstrap 101 Template/title

!--因为这里没有使用到Bootstrap的JS插件，所以就没有引用Jquery组件--

!-- Bootstrap --

link rel="stylesheet" /bootstrap/3.3.4/css/bootstrap.min.css"

/head

body

h3默认样式的Table/h3

table

caption表标题./caption

!-- 表头，组合为t+head, t代表table的意思--

thead

thID/th

thFirst Name/th

thLast Name/th

/tr

/thead

tbody

th scope="row"1/th

tdTommy/td

tdLi/td

/tr

th scope="row"2/th

tdBob/td

tdsan/td

/tr

th scope="row"3/th

tdSam/td

tdwang/td

/tr

/tbody

/table

h3带边框的表格/h3

table

caption表标题./caption

!-- 表头，组合为t+head, t代表table的意思--

thead

thID/th

thFirst Name/th

thLast Name/th

/tr

/thead

tbody

th scope="row"1/th

tdTommy/td

tdLi/td

/tr

th scope="row"2/th

tdBob/td

tdsan/td

/tr

th scope="row"3/th

tdSam/td

tdwang/td

/tr

/tbody

/table

!-- 更多表格样式参考： /css/#tables--

!-- jQuery (necessary for Bootstrap's JavaScript plugins) --

script sr"/script

!-- Include all compiled plugins (below), or include individual files as needed --

script sr"/script

/body

/html

对于Button和表单的例子代码这里就不贴了，大家可以通过下面的链接查看运行效果和查看源码。也可以通过最后的下载文件来下载本专题的所有源码。

四、CSS组件

CSS组件和基础布局组件差不多，也就是Bootstrap为一些标签定义了一些已有的样式，这些样式运行的效果都非常美观，这样每个公司或开发人员都不需要再去写一篇样式，从而加快开发效率。这里直接看一个导航的例子吧。说白这个东西，你用多了自然就熟了。

bootstrap 网页实例常用样式

!DOCTYPE html

html

head

meta charset="utf-8"

titleBootstrap 实例 - 一个简单的网页/title

link rel="stylesheet" href=""

script src=""/script

style

.fakeimg {

height: 200px;

background: #aaa;

}

/style

/head

body

div class="jumbotron text-center" style="margin-bottom:0"

h1我的第一个 Bootstrap 页面/h1

p重置浏览器窗口大小查看效果！/p

/div

nav class="navbar navbar-inverse"

div class="container-fluid"

div class="navbar-header"

button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"

span class="icon-bar"/span

/button

a class="navbar-brand" href="#"网站名/a

/div

div class="collapse navbar-collapse" id="myNavbar"

ul class="nav navbar-nav"

li class="active"a href="#"主页/a/li

lia href="#"页面 2/a/li

lia href="#"页面 3/a/li

/ul

/div

/nav

div class="container"

div class="row"

div class="col-sm-4"

h2关于我/h2

h5我的照片:/h5

div class="fakeimg"这边插入图像/div

p关于我的介绍../p

h3链接/h3

p描述文本。/p

ul class="nav nav-pills nav-stacked"

li class="active"a href="#"链接 1/a/li

lia href="#"链接 2/a/li

lia href="#"链接 3/a/li

/ul

hr class="hidden-sm hidden-md hidden-lg"

/div

div class="col-sm-8"

h2标题/h2

h5副标题/h5

div class="fakeimg"图像/div

p一些文本../p

p菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！/p

h2标题/h2

h5副标题/h5

div class="fakeimg"图像/div

p一些文本../p

p菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！/p

/div

div class="jumbotron text-center" style="margin-bottom:0"

p底部内容/p

/div

/body

/html

使用bootstrap怎么实现一个页面多选项卡，每个选项卡都是页面

如下的html代码即可

ul class="nav nav-tabs"

li role="preentation" class="active"a href="#"Home/a/li

li role="presentation"a href="#"Profile/a/li

li role="presentation"a href="#"Messages/a/li

/ul

1、Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

2、Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

3、代码

可以对Bootstrap中所有的CSS变量进行修改，依据自己的需求裁剪代码。