零基础学做网站培训介绍

当前位置:

什么是bootstrap

以下为学做网站论坛关于“什么是bootstrap”讲解视频教程。

什么是bootstrap

Bootstrap是一个做网页的框架(目前最流行的WEB前端框架之一),是一种自适应网站框架,我们制作自适应手机网站就需要学习Bootstrap。

我们使用Bootstrap时,只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页,不用担心兼容问题,并且它提供了很多样式供你选择!

比如我们想控制一个网站的文本显示格式,我们需要自己写很多的代码来控制它,但如果使用Bootstrap,它已经帮我们写好了样式,我们只需要直接拿来使用就可以了。

什么是bootstrap

Bootstrap有什么用?

bootstrap是一个做网页的框架(目前最流行的WEB前端框架),就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页,你不用担心兼容问题,提供了很多样式供你选择!

比如你需要做一个网站的导航对吧,你自己写的话你需要写很多代码,但是如果你使用bootstrap框架来写的话,只需要写好HTML标签然后调用类名就可以了!

bootstrap怎么使用

第一步、https://v3.bootcss.com/getting-started/#download  官网下载解压缩

这个bootStrap必须依赖jquery.min.js的存在,所以一并下载这个js 

第二步、把外部文件引入工程里面

把bootStrap的css、font、js、下载的jquery.min.js一并复制到项目下面

第三步、jsp页面设置如下

注意这几个文件的前后顺序,如果不对,会导致页面无法正常运行。

先引入 bootstrap.min.css (Bootstrap的样式表文件)
然后引入自己写的 css 文件(style.css)
然后引入 jQuery(javascript 库)
最后引入 bootstrap.min.js 程序文件


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--这个lang="zh-CN"是转化为html5的版本 -->
<html lang="zh-CN">
<head>
<base href="<%=basePath%>">
<title>学习bootstrap案例</title>
<!-- 这个是自适应各种分辨率的屏幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</head>

第三步、使用bootStrap的样式表,

bootstrap强大之处,在于,别人都设计好了的功能,你只需要熟悉别人的规则就可以直接使用!

小例子:

打开样式表bootstrap.css,你可以看到如下.btn-primary 显而易见这是一个按钮样式

在jsp页面写上


<body>
<button class="btn-primary">按钮</button>
</body>

刷新页面,你会看到一个蓝色的按钮。不需要自己写一行 CSS 代码,只要在页面里面给某个元素指定一个 class ,就可以直接显示出预定的样式—— 这就是使用 Bootstrap 前端框架的魔力。

发表评论

电子邮件地址不会被公开。 必填项已用*标注