使用bootstrap进行响应式开发
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用bootstrap进行响应式开发相关的知识，希望对你有一定的参考价值。
实验要求：我们在上机实验7在后端读取了名为show.html的文件，并用underscore包中的template方法将数据注入到show.html文件中并显示。我们在上机实验6中，学习了使用bootstrap进行响应式开发。实验8是将实验7中的show.html改写成响应式开发，将实验6与实验7的内容相结合。
show文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>歌单</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="card" style="width: 18rem;">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14032331944%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650783318&t=ab212492b5761936d2b9f4e61bc4c5d1"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<%=Id%>
</li>
<li class="list-group-item">
<%=title%>
</li>
<li class="list-group-item">
<%=singer%>
</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card" style="width: 18rem;">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14032331944%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650783318&t=ab212492b5761936d2b9f4e61bc4c5d1"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<%=Id%>
</li>
<li class="list-group-item">
<%=title%>
</li>
<li class="list-group-item">
<%=singer%>
</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card" style="width: 18rem;">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14032331944%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650783318&t=ab212492b5761936d2b9f4e61bc4c5d1"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<%=Id%>
</li>
<li class="list-group-item">
<%=title%>
</li>
<li class="list-group-item">
<%=singer%>
</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="card" style="width: 18rem;">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14032331944%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650783318&t=ab212492b5761936d2b9f4e61bc4c5d1"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's
content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<%=Id%>
</li>
<li class="list-group-item">
<%=title%>
</li>
<li class="list-group-item">
<%=singer%>
</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
server文件
var http = require('http');
const fs = require('fs');
var _ = require("underscore");
var server = http.createServer();
server.on('request', function (req, res)
var music =
Id: 1002,
title: '梦里水乡',
singer: '老八秘制小汉堡',
type: '奥利给'
const url = req.url;
if (url === '/show')
fs.readFile(__dirname + url + '.html', 'utf-8', function (err, data)
if (err)
res.end(err.message);
else
var compiled = _.template(data);//解析执行函数
var htmlstr = compiled(music);//调用函数，注入数据
res.end(htmlstr);//显示页面
)
else
res.end('404 not found!!!!!!');
);
server.listen(3000, "127.0.0.1", function ()
console.log("server is listening 127.0.0.1:3000");
);
以上是关于使用bootstrap进行响应式开发的主要内容，如果未能解决你的问题，请参考以下文章
7 个 Bootstrap 在线编辑器用于快速开发响应式网站
基于响应式 Bootstrap 的网页在移动设备上显示效果不佳