前后端分离---响应式布局---bootstrap网页开发

hncdman 2022-09-21 发布于湖南

展开全文

https://blog.csdn.net/weixin_44355752/article/details/109983189

于 2020-11-28 00:26:10 发布

1779

分类专栏：前后端技术

版权

前后端技术

专栏收录该内容

2 篇文章0 订阅

订阅专栏

一、响应式布局定义

定义：

响应式布局：简单来说就是根据浏览设备不同，自动改变布局，图片，文字效果等。。不会影响用户浏览体验。

响应式网页必须要注意的事情：

不能固定元素的宽度，必须是流式布局 (默认文档流 + 浮动)；

文字和图片随着容器的大小改变；

媒体查询技术；

过于复杂的页面不适合响应式；

媒体查询：css3

media 媒体浏览网页的设备 screen (pc / pad / phone )

media Query 媒体查询：可以根据当前的浏览设备的不同（包括尺寸、方向）有选择性的执行一部分css样式，忽略其他样式。

浏览设备的定义：

pc >= 992 大屏一行显示4个div(200*200);

768 <= pad <= 991 中屏一行显示2个div(h：200);

phone <= 767 小屏一行显示一个div(h-200);

css样式中的注意要点：

cursor: pointer; 点击按钮手型

float: left; 向左浮动

待续

二、bootstrap框架

bootstrap封装好很多常用的样式，只需要调用类名，但是项目中，对于很多样式，需要自己手写和媒体查询。

注意：导入四个包的时候顺序不能乱

（1）bootstrap支持四种分辨率：

大屏幕lg (>=1200px)；

中等屏幕md (>=992px)；

小屏幕sm (>=768px)；

超小屏幕xs (<768px)；

bootstrap默认字体大小 0.25rem (1 rem = 16px );

button样式：与 btn 混用；

btn-primary 主要的蓝色；

btn-success 绿色；

btn-warning 黄色；

btn-outline-success 透明绿色；

<h1>按钮相关的样式</h1>

<hr />

</div>

（2）图片样式：

rounded 0.25rem圆角；

rounded-circle 圆角50% -圆形图片；

img-thumbnail 缩略图有一圈边框；

img-fluid 响应式图片图片会缩放不会超过原始大小；

<h1>图片相关的样式</h1>

（3）文字样式：

text-danger/warning/success/info 文本颜色；

text-uppercase/lowercase 大小写；

text-capitalize 首字母大写；

font-weight-normal/light/weight 正常/加细/加粗；

.h1 - .h6 不同字体；

text-left/right/center/justify 文字水平对齐方式左右中两端对齐；

<div class="text-danger text-capitalize font-weight-normal text-left">lorem ipsum dolor sit amet,consectetur adipisicing elit.

blanditiis cum esse et facere iste reiciendis reprehenderit?

Assumenda, eum fugit id incidunt maiores nostrum numquam, odit officiis omnis quae quisquam suscipit?</div>

（4）列表相关：

list-unstyled 去掉小圆点左内边距清零；

list-group 列表组(放在ol ul) list-group-item 列表项(放在li) list-group-item-warning/dangger/success 列表项颜色；

acive 激活项 disabled 禁用项

</ul>

（5）表格样式：

table 对table本身和后代的布局

table-bordered 为自己和后代添加边框线

table-primary/success/info… 表格颜色

table-striped 隔行变色

table-hover 鼠标悬停变色

table-responsive 响应式表格写在table的父元素上

</tr>

<tr>

</tr>

<tr>

<td>web前端</td>

</tr>

<tr>

<td>软件体系结构</td>

</tr>

</table>

</div>

（6）边框类型：

border 基本类 border-0 清楚边框

border-info/success 边框颜色

border-left/top/right/button 单边设置

border-left-0 单边消除

（7）浮动类型：

float-xl/md/sm/lg-left/right/none 响应式浮动

clearfix 清除浮动写在父元素上

<h1>浮动相关样式</h1>

（8）显示与隐藏：

visible 显示

invisible 隐藏

bg-primary/warning…背景色

rounded 圆角 0.25rem

rounded-0 去掉圆角

rounded-top 上左+上右

rounded-left/bottom/right 上左+下左/下左+下右+上右+下右

m-auto 水平居中

<h1>显示与隐藏</h1>

（9）内外边距：

m-auto 水平居中

m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5 对应0/0.25/0.5/1/1.5/3 外边距

p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 对应0/0.25/0.5/1/1.5/3 内边距

*表示xl/lg/md/sm

（10）尺寸相关：

w-25/50/75/100 宽度 25%/50%/75%/100%

h-25/50/70/100 高度 25%/50%/75%/100%

（11）栅格布局：重要：

必须要放在.container 或者.containner-fluid 中；

每一行都是一个row

在row中声明col 占份一row有12col

row 的直接子元素只能是col

col 没有份额，一行可以超过12个，并且是平均分配宽度

可以用在响应式布局中；

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Ab consectetur debitis dolores dolorum eos et labore magni, nam,

nobis numquam odio quo saepe sed sequi, sunt totam voluptate. Aliquam, soluta.

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Asperiores dolorem dolorum eveniet exercitationem,

ipsa molestias necessitatibus nobis placeat, quo rerum sed sint voluptates voluptatum.

Dicta libero nihil omnis quaerat tenetur!

</div>

</body>

（12）列偏移：

offset-n 可以指定该列以及后面列向右偏移 n 个份；

可以运用响应式偏移；

</div>

（13）表单样式：

form-inline 内联表单水平方向(弹性布局)

form-group 堆叠表单垂直方向

form-control input的基本样式 (块级、圆角、边框等)

父元素：form-check 相对定位，让子元素以父元素进行偏移/定位

子元素：form-check-input 绝对定位，和form-check配合使用

</div>

<div class="col-2">用户名包含字母数字3-8位</div>

</div>

</div>

<div class="col-2">密码包含字母数字3-8位</div>

</div>

</div>

</div>

</form>

（14）下拉菜单：

dropdown-toggle 追加一个倒三角形

dropdown-menu 隐藏菜单选项

data-toggle=“dropdown” 给button添加一个自定义属性，构成下拉菜单作用：点击按钮激发事件，事件激发调用函数

配合 ul 列表使用

</ul>

</div>

（15）按钮组：

btn-group 水平按钮组

btn-group-vertical 垂直按钮组

btn-group-sm … 调整按钮组大小

<h1>垂直按钮组</h1>

<button class="btn btn-danger">西蓝花炒肉</button>

<button class="btn btn-warning">西蓝花凉拌</button>

<button class="btn btn-info">水煮西蓝花</button>

<button class="btn btn-primary">白炒西蓝花</button>

</div>

<h1>默认按钮组</h1>

<button class="btn btn-danger">西蓝花炒肉</button>

<button class="btn btn-warning">西蓝花凉拌</button>

<button class="btn btn-info">水煮西蓝花</button>

<button class="btn btn-primary">白炒西蓝花</button>

</div>

（16）信息提示框：

alert 外层div class 基本类

alert-danger/seccess… 提示框颜色

alert-dismiss 修饰内部.close

内层span 取消提示信息框的X

.close与父元素alert-dismissible配合使用

自定义属性 data-dismiss=“alert”

<h1>信息提示框</h1>

今天好冷！！！！！！！！

</div>

（17）导航：

nav 在ul上的基本类，定义了弹性布局

nav-item 在li上与父级配合使用，让元素等宽显示

nav-link 在a上设置了hover样式，块级元素

justify-content-around 平均水平导航栏

flex-column 垂直导航栏

<li class="nav-item"><a href="" class="nav-link">PLUS会员</a></li>

</ul>

（18）选项卡导航：

ul.nav 变成选项卡使用 nav-tabs

li.nav-item 配合父元素ul使用

a.nav-link 同时a中也要加自定义属性data-toggle=“tab”

div.tab-content让子元素隐藏或者显示

div.tab.pane配合父元素的tab-content使用让子元素display:none

子元素div要添加id，被上面的a href引用，并且要与每一个a标签对应

默认显示在默认的a标签中加入active 同时，对应的div中也要添加

<h1>选项卡导航</h1>

<li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">广东东莞大益队</a></li>

<li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">深圳马可波罗</a></li>

<li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">广州新时代</a></li>

</ul>

<div class="tab-pane active" id="tab1">1广东东莞大益队</div>

<div class="tab-pane" id="tab2">2深圳马可波罗</div>

<div class="tab-pane" id="tab3">3广州新时代</div>

</div>

（19）胶囊导航：

ul.nav .nav-pills 选中样式变为蓝色

其余和选项卡导航类似

</ul>

<div class="tab-pane" id="tab5">Java框架</div>

</div>

（20）卡片：

div.card 父容器中

div.card-header 子容器中标题

div.card-body 内容

</div>

<p>lorem内容</p>

</div>

</div>

（21）媒体：

div.dedia 父容器中

接着一张 img图片

div.media-body 子容器中有标题与内容

可以结合ul li 形成一个媒体列表

<p>学的不仅是技术，还是梦想</p>

</div>

</li>

<p>学的不仅是技术，还是梦想</p>

</div>

</li>

<p>学的不仅是奇数，还是梦想</p>

</div>

</li>

</ul>

（21）图片轮播：

轮播图片

最外层div.carousel 并且添加自定义元素 data-ride=“carousel”

录播图片容器div.carousel-inner

每一张图片都用一个div包着 div.carousel-item 并且在第一张轮播图片添加active激活图片宽度w-100

左右箭头

.carousel-control-next, .carousel-control-prev 需要重写

data-slide="next/prev"自定义属性注意写href=’#demo’

a需要加上

轮播指示符小圆点

给最外层div.carousel 添加data-ride=“carousel” id=“demo”

ul.carousel-indicators

li 重写部分样式宽高，圆角，背景色

重写active 背景色

</div>

</div>

</div>

</div>

</a>

</a>

</ul>

</div>

三、Node.js框架

express框架基于node.js平台引入express包

//1.引入express

const express = require('express');

const querystring = require('querystring');

// 2.创建web服务器

const app = express();

// 3.设置端口

app.listen(8080);

// 请求商品列表

// 请求的url:/list 请求的方法:get

// 通过回调函数做出相应

app.get('/list',(req,res)=>{

res.send('hello');

})

// 路由：用于处理特定的请求，包含请求的方法，url，回调函数，只有请求的方法和请求的url匹配，才会执行回调函数

// res 相应对象

// res.send() 设置相应的内容并发送

// res.sendFile() 设置相应的文件并发送文件要使用绝对路径：__dirname+文件名

// res.redirect('http://www.') 设置相应的重定向，挑战到另一个url

//当前模块的对决目录

// sonsole.log(__dirname);

//req请求对象

// 获取请求的方法 get post 请求的url

// console.log(req.method,req.url);

//直接获取传递的数据，格式为对象

// console.log(req.query); 输出为 key：value

// 对比get和post

// get：请求传递的数据是以查询字符串传递，可能会被浏览器缓存，速度相对快一点，传递数据不超过4K

// post：传递的数据是以请求为主体的方式传递，不会被浏览器缓存，速度相对慢一点，可以传递大文件

// let 是定义数据

//将分段的数据放入到参数chunk中

// console.log(chunk);

// let str = String(chunk);

// console.log(str);

// let obj = querystring.parse(str);

// res.send('登录成功:'+obj.username);

// /index get <h2>这是首页</h2>

app.get('/index',(req,res)=>{

res.send('<h2>这是首页</h2>');

})

//请求的url /请求的方法get 相应文件1.html

app.get('/',(req,res)=>{

res.sendFile(__dirname+'/1.html');

})

//当前模块的对决目录

// sonsole.log(__dirname);

// /detail get detail.html <h2></h2>

app.get('/detail',(req,res)=>{

res.sendFile(__dirname+'/detail.html');

})

//跳转 get 请求的url /study http://www.

app.get('/study',(req,res)=>{

res.redirect('http://www.');

})

// 使用express创建web服务器，设置端口，添加路由(get，/search) 相应文件

// search.html h2-用户搜索

app.get('/search',(req,res)=>{

res.sendFile(__dirname+'/search.html');

})

//根据表单提交请求创建对应的路由 this is list

app.get('/mysearch',(req,res)=>{

res.send('this is list !'+req.query.keyword);

})

app.get('/login',(req,res)=>{

res.sendFile(__dirname+'/login.html');

})

app.post('/mylogin',(req,res)=>{

req.on('data',(chunk)=>{

//将分段的数据放入到参数chunk中

// console.log(chunk);

let str = String(chunk);

// console.log(str);

let obj = querystring.parse(str);

res.send('登录成功:'+obj.username);

});

})

四、中间件

中间件：中间件为路由服务的，用于拦截对路由的请求，也可以做出响应

中间件分为：应用级中间件，路由级中间件，内置中间件，第三方中间件，错误处理中间件

应用级中间件

导入路由器对象

// 导入包

// 导入路由器对象

const express = require('express');

const userRouter = require('./user.js');

const productRouter = require('./product');

// const querystring = require('querystring');

// 创建服务器对象

const app = express();

// 端口

app.listen(8080);

// 挂载路由器到web服务器下，添加前缀

// 参数1：添加的前缀

// 参数2：要挂载的路由器

app.use('/user',userRouter);

app.use('/product',productRouter);

路由器对象

// 引入包

const express = require('express');

// 创建路由器对象

const r = express.Router();

// 往路由器中添加路由用户列表路由 get /list

r.get('/list',(req,res)=>{

res.send('这是用户列表');

})

// 导出路由器对象

module.exports = r;

拦截

const express = require('express');

const app = express();

app.listen(8080);

//智能按照url拦截

// 拦截对/list的请求

// 参数1：要拦截的url

// 参数2：回调函数，一旦拦截到，自动调用这个函数

app.use('/list',(req,res,next)=>{

//req res 和路由中的是一样的

//获取以查询字符串传递的数据

console.log(req.query);

if(req.query.uname!=='root') {

res.send('请提供管理员的账户');

}

else{

//往后执行下一个中间件即这是所有用户数据

next();

}

});

app.get('/list',(req,res)=>{

res.send('这是所有的用户数据')

})

// 添加中间件，拦截添加购物车的请求

app.use('/shopping',(req,res,next)=>{

console.log(req.query);

req.query.price = req.query.price*0.9;

next();

})

app.get('/shopping',(req,res)=>{

console.log(req.query);

res.send('这是购物车价格为：'+req.query.price)

})

未完待续。。。

————————————————

原文链接：https://blog.csdn.net/weixin_44355752/article/details/109983189

本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。

转藏分享

QQ空间 QQ好友新浪微博微信

献花（0） +1

来自： hncdman > 《bootstrap》

举报/认领

0条评论

发表

请遵守用户评论公约

类似文章 更多

hncdman

关注对话

TA的最新馆藏

uniapp APP端在线升级功能实现讲解——强制或可选升级，下载进度显示
uniapp自动升级
easyexcel导出动态列数据
EasyExcel实战自定义动态化导出excel
Java实现excel动态列导出的示例代码
EasyExcel 导出动态表格

喜欢该文的人也喜欢更多

热门阅读换一换