响应式布局 bootstrap栅格系统

阿里百秀案例制作

1.1 技术选型

方案：我们采取响应式页面开发方案

技术：bootstrap框架

设计图：本设计图采用 1280px 设计尺寸

项目结构搭建

Bootstrap 使用四步曲：

创建文件夹结构
创建 html 骨架结构
引入相关样式文件
书写内容

index.html

<!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" /><!-- 1.引入 bootstrap.css --><link rel="stylesheet" href="./boostrap/css/bootstrap.css" /><!-- 2.引入自己的 index.css --><link rel="stylesheet" href="./css/index.css" /><title>阿里百秀</title></head><body><!-- 1.响应式布局容器 --><div class="container"><div class="row"><!-- 因为大屏跟中屏 比例都是 2：7：3 ，没有设置上限，所以用中屏 md 即可  --><header class="col-md-2"><!-- logo部分优化： <h1><a href="#"></a></h1>  --><h1 class="logo"><a href="#"><!-- 在极小屏幕显示 --><span class="visible-xs">阿里百秀</span><!-- 在极小屏幕隐藏 --><img class="hidden-xs" src="./images/logo.png" alt="" /></a></h1><!-- 导航 --><ul class="nav"><li><a href="#"><i class="glyphicon glyphicon-camera"></i>生活馆</a></li><li><a href="#"><i class="glyphicon glyphicon-picture"></i>自然汇</a></li><li><a href="#"><i class="glyphicon glyphicon-phone"></i>科技潮</a></li><li><a href="#"><i class="glyphicon glyphicon-gift"></i>奇趣事事</a></li><li><a href="#"><i class="glyphicon glyphicon-glass"></i>美食杰</a></li></ul></header><article class="col-md-7"><!-- 图片列表 --><section class="pic"><div class="left"><img src="./upload/lg.png" alt="" /></div><div class="right"><a href="#"><img src="./upload/1.jpg" alt="" /></a><a href="#"><img src="./upload/2.jpg" alt="" /></a><a href="#"><img src="./upload/3.jpg" alt="" /></a><a href="#"><img src="./upload/4.jpg" alt="" /></a></div></section><!-- 新闻列表 --><section class="news"><ul><li class="row"><div class="col-md-9"><h3>又现酒窝夹笔盖新技能 城里人是不让人活了！</h3><p class="text-muted hidden-xs">themebetter主题小秘发布2021-1-1</p><p class="hidden-xs">继炫腹，炫锁骨以后，城里人又现新技能:酒窝夹笔盖！你们城里人活儿真好，又是反手摸肚脐炫腹，锁骨放硬币秀胸的，现在又来酒窝夹笔盖晒脸！别以为我不知道你们在想什么！！哼还让不让人活了 一大波美女晒颜值拼活介个真心赞啊，肤白貌美颜值高，酒窝笔盖夹得好。 小梨涡夹笔盖也是毫不费力呢！...</p><p class="text-muted">阅读(2417)评论(1)赞 (18) 标签：炫富 / 酒窝 / 趣味生活</p></div><div class="col-md-3 hidden-sm hidden-xs"><img src="./upload/1.jpg" alt="" /></div></li></ul></section></article><aside class="col-md-3"><div class="boke"><img src="./upload/zgboke.jpg" alt="" /></div><div class="hot"><button type="button" class="btn btn-danger">热搜</button><h4>欢迎加入中国博客联盟</h4><p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台....</p></div></aside></div></div></body>
</html>

index.less

li {list-style: none;
}
ul {margin: 0;padding: 0;
}
.shenglue {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}// 头部
header {.logo {background-color: #ff5e52;margin: 0;img {width: 100%;}}// 导航.nav a {background-color: #eee;color: #444;&:hover {background-color: #fff;color: #ff5e52;}}
}// 文章
article {.pic {display: flex;justify-content: space-between;border-bottom: 1px solid #ccc;padding-bottom: 10px;img {width: 100%;height: 100%;}.left,.right {width: calc((100% - 5px) / 2);height: 266px;// background-color: #0a0;}.right {display: flex;flex-wrap: wrap;justify-content: space-between;// 多行align-content: space-between;}.right a {width: calc(50% - 5px);height: 128px;// background-color: #6cf;}}.news {li {border-bottom: 1px solid #ccc;}h3 {.shenglue;}img {width: 100%;margin: 10px;}}
}aside {.boke img {width: 100%;}.hot {border: 1px solid #ccc;padding: 0 20px;margin-top: 20px;h4 {.shenglue;}p {font-size: 12px;}}.hot button {background-color: #ff6054;border: 0;border-radius: 0;}
}// 媒体查询  小屏幕设置样式
@media screen and (min-width: 768px) and (max-width: 991px) {// 头部header {.logo {text-align: center;}.logo img {width: auto;}.nav {display: flex;li {flex: 1;text-align: center;}}}
}// 超小屏幕设置样式
@media screen and (max-width: 767px) {header {.logo a {height: 50px;line-height: 50px;color: #fff;text-align: center;font-size: 14px;// 添加下划线  tdutext-decoration: underline;}.nav {display: flex;li {flex: 1;text-align: center;i {display: block;margin-bottom: 3px;}}}}article {.pic {flex-wrap: wrap;.left,.right {width: 100%;}}.news h3 {font-size: 16px;}}
}

响应式布局 bootstrap栅格系统相关推荐

移动WEB开发之响应式布局--Bootstrap栅格系统
栅格系统简介栅格系统英文为"grid systems",也有人翻译为"网格系统",它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局. Bo ...
响应式框架Bootstrap栅格系统
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的.Bootstrap 提供了一些辅助类,以便更快地实现对 ...
Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
响应式设计-Bootstrap栅格布局
响应式布局:就是一个网站为了兼容多个终端,而不是为每个终端制定特定的版本.这个概念是为解决移动互联网浏览而诞生的. 全面了解Bootstrap可以看:http://v3.bootcss.com/css ...
响应式布局——Bootstrap
二.BootStrap 1.1 BootStrap简介目标:使用BootStrap框架快速开发响应式网页 Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样 ...
【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍布局:layout 对事物的全面规划和安排页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
移动web开发 17-1 响应式布局 bootstrap首页框架阿里百秀项目
1 响应式开发原理 1.1 响应式开发原理核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法当屏幕宽度<=768 ...
【HTML+CSS】移动端布局之响应式布局+Bootstrap框架
学习视频及笔记参考来源: 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一.响应式开发 1.响应式开发原理原理:就是使 ...
CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...

响应式布局 bootstrap栅格系统

阿里百秀案例制作

1.1 技术选型

响应式布局 bootstrap栅格系统相关推荐

最新文章

热门文章