大学生怎么用bootstrap框架制作网页设计作业

发布时间:2020-06-28   文章分类:网页技术课堂

Bootstrap是一个简洁、直观、强悍的前端开发框架,只要学习并遵守它的标准,即使是没有学过网页设计的开发者,也能做出很专业、美观的页面。
 
1、下载bootstrap然后将文件导入你的项目中,放在项目的根目录下
BOOTSTRAP
 
2、下载jquery然后将文件导入你的项目中,放在项目的根目录下
JQUERY
3、在项目的根目录上创建一个html文件,将bootstrap文件和jquery文件导入到html中,也可以复制下方代码
<!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标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>网页标题</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>你好,世界!</h1>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="js-3.5.1/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
注意导入的顺序:
导入bootstrap的css文件:bootstrap.min.css
导入jquery的js文件:jquery-3.4.1.min.js
导入bootstrap的js文件:bootstrap.min.js
4、进入bootstrap可视化布局(https://www.runoob.com/try/bootstrap/layoutit/)制作好布局后点击下载,复制源码到你的html文件的body内,再加入自己的css和js样式就可以了。
Bootstrap网页作业
 
STU网页公众号

专注于Dreamweaver网页设计作业,大学生DW网页作业定制,HTML静态网页制作作业,简单网页作业成品模版免费下载,高中至大学一二三年级网站作业定制设计...