本文介绍如何使用Bootstrap框架创建一个响应式布局的博客网站，包括基本的HTML结构、CSS样式定制及LESS预处理语言的应用。
- rem 单位
- 媒体查询
一般媒体查询从小到大会有优势，利用代码的层叠性，代码更简洁
语法规范
- mediatype查询类型
- 关键字
- 媒体特性
- 媒体查询+rem实现元素动态大小变化
- 引入资源
- less基础
- 维护css的弊端
less是一门css预处理语言，它扩展了css的动态特性 - less变量
- less编译
通过easy LESS插件将less编译为css文件 - less嵌套
- less运算
- rem适配方案
- 技术方案一
bootstrap 最受欢迎的HTML、CSS和JS框架，用于开发响应式布局，移动设备优先的web项目
特色：
响应式布局、基于flex的栅格系统、丰富的组件和工具方法、常见交互使用
官网：https://getbootstrap.com/
栅格系统
以下是栅格系统中各个字段表示的一个响应式的范围
blog系统案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.iconfangdajing{ margin-right: 4px; font-size:20px; position: relative; top: 4px;}
.box200-250{ width:200px; height:250px; background:gray;}
</style>
</head>
<body>
<div class="container">
<!-- <header class="row py-2 align-items-center text-center">
<div class="col text-left">
<a href="#">Subscribe</a>
</div>
<div class="col">
<h2><a href="#">Large</a></h2>
</div>
<div class="col text-right">
<a href="#"><i class="iconfont iconfangdajing"></i></a>
<a href="#">Sign up</a>
</div>
</header> -->
<header class="row py-2 justify-content-between align-items-center">
<div class="col-auto">
<a href="#" class="text-muted">Subscribe</a>
</div>
<div class="col-auto">
<h2><a href="#" class="text-dark text-decoration-none">Large</a></h2>
</div>
<div class="col-auto">
<a href="#" class="text-muted text-decoration-none">
<i class="iconfont iconfangdajing"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary">Sign up</a>
</div>
</header>
<div class="border-bottom"></div>
<nav class="d-flex justify-content-between py-1 mb-2 overflow-auto">
<a href="#" class="text-muted p-2">World</a>
<a href="#" class="text-muted p-2">U.S.</a>
<a href="#" class="text-muted p-2">Technology</a>
<a href="#" class="text-muted p-2">Culture</a>
<a href="#" class="text-muted p-2">Business</a>
<a href="#" class="text-muted p-2">Politics</a>
<a href="#" class="text-muted p-2">Opinion</a>
<a href="#" class="text-muted p-2">Science</a>
<a href="#" class="text-muted p-2">Health</a>
<a href="#" class="text-muted p-2">Style</a>
<a href="#" class="text-muted p-2">Travel</a>
</nav>
<div class="jumbotron bg-dark text-white p-2">
<div class="col-md-6 m-3">
<h1 class="display-4 font-italic" style="font-family:'Playfair Display', Georgia, 'Times New Roman', serif;">Title of a longer featured blog post</h1>
<p class="lead">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead">
<a href="#" class="text-white font-weight-bold">Continue reading...</a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="row border shadow-sm rounded no-gutters overflow-hidden">
<div class="col p-3">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-md-block">
<a href="#"><div class="box200-250"></div></a>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="row border shadow-sm rounded no-gutters overflow-hidden">
<div class="col p-3">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-md-block">
<a href="#"><div class="box200-250"></div></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h3 class="font-italic border-bottom py-4">From the Firehose</h3>
<div class="mt-4">
<h2>Sample blog post</h2>
<p>January 1, 2014 by <a href="#">Mark</a></p>
<p class="border-bottom pb-4">This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Etiam porta <em>sem malesuada</em> magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="mt-4">
<h2>Sample blog post</h2>
<p>January 1, 2014 by <a href="#">Mark</a></p>
<p class="border-bottom pb-4">This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Etiam porta <em>sem malesuada</em> magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="mt-4">
<a href="#" class="btn btn-outline-primary rounded-pill">Older</a>
<a href="#" class="btn btn-outline-secondary disabled rounded-pill">Newer</a>
</div>
</div>
<div class="col-md-4">
<div class="bg-light rounded p-4 mt-4">
<h3 class="font-italic">About</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="mt-4 ml-md-2">
<h3>Archives</h3>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2014</a></li>
<li><a href="#">November 2014</a></li>
<li><a href="#">October 2014</a></li>
<li><a href="#">September 2014</a></li>
<li><a href="#">August 2014</a></li>
<li><a href="#">July 2014</a></li>
<li><a href="#">June 2014</a></li>
</ol>
</div>
<div class="mt-4 ml-md-2">
<h3>Elsewhere</h3>
<ul class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="containder-fluid bg-light text-center p-4 mt-4 text-muted">
<p class="my-4">Blog template built for <a href="#">Bootstrap</a> by <a href="#">@mdo.</a></p>
<p><a href="#">Back to top</a></p>
</div>
</body>
</html>
部分页面截图如下所示
sass+less
在设置变量时：
less使用@，sass使用$
sass的作用域是有顺序的，而less完全是就近原则
less没有属性嵌套的写法，sass可以写属性嵌套
数值：
在less中两个单位进行运算，以第一个单位为准；
在sass中如果单位不同则不能进行运算，默认/是分隔的操作，除运算的话用小括号括起来
扫一扫
2077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
