6 使用 Bootstrap 前端框架

国阳

2023-12-01

使用 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
`.container` 最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
列数	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

隐藏的元素

屏幕规格	引用样式
所有屏幕下隐藏	`.d-none`
只在xs屏幕上隐藏（即仅在手机屏幕上隐藏-其它规格屏幕正常显示-译者注）	`.d-none .d-sm-block`
只在sm屏幕上隐藏（其它屏幕规格均显示）	`.d-sm-none .d-md-block`
只在md屏幕时隐藏（其它屏幕规格均显示）	`.d-md-none .d-lg-block`
只在lg屏幕时隐藏（其它屏幕规格均显示）	`.d-lg-none .d-xl-block`
只在xl屏幕时隐藏（其它屏幕规格均显示）	`.d-xl-none`
全部可见	`.d-block`
仅在xs屏幕时可见	`.d-block .d-sm-none`
仅在sm屏幕时可见	`.d-none .d-sm-block .d-md-none`
仅在md屏幕时可见	`.d-none .d-md-block .d-lg-none`
仅在lg屏幕时可见	`.d-none .d-lg-block .d-xl-none`
仅在xl屏幕时可见	`.d-none .d-xl-block`

响应式图片

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

    <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/

作业

使用 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">
                    Email
                    <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 %}

6 使用 Bootstrap 前端框架

使用 Bootstrap 前端框架

Bootstrap 是什么？

为什么要用 Bootstrap？

怎么使用

预先配置 – HTML 模板

响应式 meta 标签

示例代码 – 引入文件

示例代码 – 栅格布局

等宽布局

display 显示属性

隐藏的元素

响应式图片

水平居中对齐 justify-content-center

导航栏

Font Awesome

相关资源

作业

code

base.html

index.html

login.html

signup.html

upload.html

相关阅读

相关文章

相关问答

相关文档