6 使用 Bootstrap 前端框架

其他 2018-11-16 15:38:41 阅读次数: 0

使用 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

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/

相关资源

作业

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

猜你喜欢

转载自blog.csdn.net/qq_14993591/article/details/83044853
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022