使用 Bootstrap 前端框架
Bootstrap 是什么?
- 基于HTML,CSS,JS的简洁灵活的流行前端框架及交互组件集
Bootstrap · 全球最流行的 HTML、CSS 和 JS 工具库 - 为快速WEB开发提供了一套前端工具包,包括布局、网格、表格、按钮、表单、导航、提示等等
- 它的最新版本是 4.1,有不少网站还在用 3.x
为什么要用 Bootstrap?
- Twitter 出品,大厂开源产品 Github
- 基于 Less,丰富的 Mixin
- Responsive 的栅格系统(Grid),移动设备优先
- 丰富的组件(HTML和JS)
- 插件(比如 icon font – Font Awesome)
怎么使用
- Getting Start (install/setup…)
- 网络教程、资源和社区
- 线上网站是用 CDN 版本
- 定制和 Less
预先配置 – HTML 模板
响应式 meta 标签
Bootstrap 本着 移动设备优先 的策略开发的,按照这一策略,我们优先为移动设备优化代码,然后根据每个组件的情况并利用 CSS 媒体查询(CSS media queries)技术为组件设置合适的样式。
为了确保在所有设备上能够正确渲染并支持触控缩放,务必将设置 viewport 属性的 meta 标签添加到 <head>
中
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Width=device-width => 表示页面宽度是设备屏幕的宽度;确保网页能被不同屏幕分辨率的设备正确呈现;
- user-scalable=no => 是否可以调整缩放比例(yes/no);
- initial-scale=1.0 => 表示初始的缩放比例 ,以 1:1 的比例呈现,不会有任何的缩放;minimum-scale=0.5:最小允许的缩放比例;
- maximum-scale=2.0:最大允许的缩放比例;
如果maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
这样设置后,图片或元素也设置style=”width:100%”,那么图片看起来也是全屏的了。
示例代码 – 引入文件
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="{{ static_url('css/bootstrap.css') }}">
<!-- jQuery文件 -->
<script src="{{ static_url('js/jquery-3.3.1.slim.min.js') }}"></script>
<!-- Popper文件 -->
<script src="{{ static_url('js/popper.min.js') }}"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="{{ static_url('js/bootstrap.js') }}"></script>
示例代码 – 栅格布局
https://code.z01.com/v4/layout/grid.html
<div class="container">
<div class="row">
<div class="col-sm">
三分之一空间占位
</div>
<div class="col-sm">
三分之一空间占位
</div>
<div class="col-sm">
三分之一空间占位
</div>
</div>
</div>
超小屏幕 (新增规格)<576px | 小屏幕 次小屏≥576px | 中等屏幕 窄屏≥768px | 大屏幕 桌面显示器≥992px | 超大屏幕 大桌面显示器≥1200px | |
| None (auto) | 540px | 720px | 960px | 1140px |
类前缀 | | | | | |
列数 | 12 | ||||
列间隙 | 30px (每列两侧各15px) | ||||
可嵌套性 | Yes | ||||
可嵌套性 | Yes |
等宽布局
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
display 显示属性
https://code.z01.com/v4/utilities/display.html
隐藏的元素
屏幕规格 | 引用样式 |
所有屏幕下隐藏 | |
只在xs屏幕上隐藏(即仅在手机屏幕上隐藏-其它规格屏幕正常显示-译者注) | |
只在sm屏幕上隐藏(其它屏幕规格均显示) | |
只在md屏幕时隐藏(其它屏幕规格均显示) | |
只在lg屏幕时隐藏(其它屏幕规格均显示) | |
只在xl屏幕时隐藏(其它屏幕规格均显示) | |
全部可见 | |
仅在xs屏幕时可见 | |
仅在sm屏幕时可见 | |
仅在md屏幕时可见 | |
仅在lg屏幕时可见 | |
仅在xl屏幕时可见 | |
响应式图片
https://code.z01.com/v4/content/images.html
在Bootstrap中,给图片添加.img-fluid
样式,或定义max-width: 100%
、height:auto;
样式,即可赋得响应式特性,图片大小会随着父元素大小同步缩放。
<img src="..." class="img-fluid" alt="Responsive image">
% for post in post_list %}
<a href="post/{{ post.id }}">
<img src="{{ static_url(post.image_url) }}" class="img-fluid" width="666">
</a>
{% end %}
base.html
<div class="container">
{% block content %}
base
{% end %}
</div>
index.html
<div class="row">
<div class="col col-md-8">
{% for post in post_list %}
<a href="post/{{ post.id }}">
<img src="{{ static_url(post.image_url) }}" class="img-fluid" width="666">
</a>
{% end %}
</div>
<div class="d-none d-sm-none d-md-block col-md-4">
4col
</div>
</div>
水平居中对齐 justify-content-center
https://code.z01.com/v4/layout/grid.html
login.html
<div class="row justify-content-center">
<div class="col-sm-6">
{% if error %}
{{ error }}
{% end %}
<form action="/login?next={{ nextname }}" method="post" enctype="multipart/form-data">
<div class="form-group">
Username
<input autofocus="" class="form-control" id="id_username" maxlength="254" name="username" type="text"
required="">
</div>
<div class="form-group">
Password
<input class="form-control" id="id_password" name="password" type="password" required="">
</div>
<button class="">Login</button>
<div>
还没有账号 需要<a href="/signup">注册</a>一个
</div>
</form>
</div>
</div>
导航栏
https://code.z01.com/v4/components/navbar.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Tudo 图片</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">发现</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
用户中心
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">个人信息</a>
<a class="dropdown-item" href="#">收藏</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="/logout">登出</a>
</li>
</ul>
<a class="btn btn-info" href="/upload">上传</a>
</div>
</nav>
Font Awesome
http://www.fontawesome.com.cn/faicons/
<a class="navbar-brand" href="#">
<i class="fa fa-camera"></i>
Tudo 图片
</a>
<a class="btn btn-info" href="/upload">
<i class="fa fa-upload"></i>
上传
</a>
案例
http://www.fontawesome.com.cn/examples/
相关资源
- Bootswatch - 免费的 Bootstrap 主题包
- Font Awesome, the iconic font and CSS toolkit
- BootCDN 开源项目免费 CDN 服务
- Bootstrap快速入门 - 云+社区 - 腾讯云
- Buttons - 一个高度可定制的按钮(button) CSS 样式库。
- Bootstrap4.0中文文档
作业
使用 bootstrap 美化站点
code
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ static_url('css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ static_url('font-awesome-4.7.0/css/font-awesome.css') }}">
<title>{% block title %}base{% end %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<i class="fa fa-camera"></i>
Tudo 图片
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">首页<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/explore">发现</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
用户中心
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">个人信息</a>
<a class="dropdown-item" href="#">收藏</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="/logout">登出</a>
</li>
</ul>
<a class="btn btn-info" href="/upload">
<i class="fa fa-upload"></i>
上传
</a>
</div>
</nav>
<div class="container">
{% block content %}
base
{% end %}
</div>
<script src="{{ static_url('js/jquery-3.3.1.slim.min.js') }}"></script>
<script src="{{ static_url('js/popper.min.js') }}"></script>
<script src="{{ static_url('js/bootstrap.js') }}"></script>
</body>
</html>
index.html
{% extends 'base.html' %}
{% block title %}
index page
{% end %}
{% block content %}
<div class="row">
<div class="col col-md-8">
{% for post in post_list %}
<a href="post/{{ post.id }}">
<img src="{{ static_url(post.image_url) }}" class="img-fluid" width="666">
</a>
{% end %}
</div>
<div class="d-none d-sm-none d-md-block col-md-4">
4col
</div>
</div>
{% end %}
login.html
{% extends 'base.html' %}
{% block title %}
login page
{% end %}
{% block content %}
<div class="row justify-content-center">
<div class="col-sm-6">
{% if error %}
{{ error }}
{% end %}
<form action="/login?next={{ nextname }}" method="post" enctype="multipart/form-data">
<div class="form-group">
Username
<input autofocus="" class="form-control" id="id_username" maxlength="254" name="username" type="text"
required="">
</div>
<div class="form-group">
Password
<input class="form-control" id="id_password" name="password" type="password" required="">
</div>
<button class="btn btn-outline-primary btn-lg btn-block">登录</button>
<br>
<div>
还没有账号 需要<a href="/signup">注册</a>一个
</div>
</form>
</div>
</div>
{% end %}
signup.html
{% extends 'base.html' %}
{% block title %}
signup page
{% end %}
{% block content %}
<div class="row justify-content-center">
<div class="col-sm-6">
{% if msg %}
{{ msg }}
{% end %}
<form action="/signup" enctype="multipart/form-data" method="post">
<div class="form-group">
Username
<input autofocus="" class="form-control" id="id_username" maxlength="150" name="username" type="text" required="">
</div>
<div class="form-group">
<input class="form-control" id="id_email" name="email" type="email" required="">
</div>
<div class="form-group">
Password
<input class="form-control" id="id_password1" name="password1" type="password" required="">
</div>
<div class="form-group">
Password confirmation
<input class="form-control" id="id_password2" name="password2" type="password" required="">
</div>
<button class="btn btn-outline-primary btn-lg btn-block">立即注册</button>
<br>
<div class="text-center help-text">
已有账号请 <a href="/login">登录</a>
</div>
</form>
</div>
</div>
{% end %}
upload.html
{% extends base.html %}
{% block title %}
upload
{% end %}
{% block content %}
<form action="/upload" method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="file" name="newimg" class="form-control-file" id="exampleFormControlFile1">
<br>
<input type="submit">
</div>
</form>
{% end %}