首页 > 其他分享 >6 使用 Bootstrap 前端框架

6 使用 Bootstrap 前端框架

时间：2022-12-21 14:07:46浏览次数：67  
标签：none end 框架 前端 Bootstrap html 屏幕 block


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


标签：none,end,框架,前端,Bootstrap,html,屏幕,block
From： https://blog.51cto.com/u_12881709/5959863

相关文章

  • drf框架时间处理问题
    问题：时间显示多个T和毫秒等，不是中国人常用的时间格式解决方法：第一种：全局配置在settings.py的REST_FRAMEWORK下配置(全局生效)REST_FRAMEWORK={#时间格式配置......
  • ArkUI，更高效的框架设计
     上期文章我们讲到了ArkUI的三大特性，同时提到了ArkUI是一套用于构建HarmonyOS应用界面的UI开发框架，本期我们将从架构设计上来聊聊ArkUI的设计理念。ArkUI架构图从......
  • 彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-JWT和中间件(Middlewar
    前文再续，上一回我们完成了用户的登录逻辑，将之前用户管理模块中添加的用户账号进行账号和密码的校验，过程中使用图形验证码强制进行人机交互，防止账号的密码被暴力破解。本回......
  • 配置前端开发环境
    配置前端开发环境开发软件：VSCode，HBuilderX、微信小程序开发工具node-->npm、yarn、cnpmyarn安装命令：npminstall-gyarnhttps://nodejs.org/en/ 设置淘宝镜像......
  • 微信小程序的开发流程（前端部分）
    以下将讲述微信小程序的开发流程（前端部分）参考网址：https://mp.weixin.qq.com/ 1.准备申请账号，获取appId与appSecret；（团队开发时，自己未注册时也可以获取，可让账号管......
  • 掌握这20个JS技巧，做一个不加班的前端人
    本文分享自华为云社区《提高代码效率的20个JavaScript技巧和窍门》，作者：海拥。在我们的日常任务中，我们会编写诸如排序、搜索、查找唯一值、传递参数、交换值等功能，所以......
  • 面试了十几个高级前端，竟然连（扁平数据结构转Tree）都写不出来
    「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」前言招聘季节一般都在金三银四，或者金九银十。最近在这五六月份，陆陆续续面试了十几个高级......
  • Django框架8
    今日内容概要ajax补充说明多对多三种创建方式django内置序列化组件ORM批量操作数据自定义分页器form组件今日内容详细ajax补充说明主要是针对回调函数args接收......
  • 前端性能----从输入URL开始到返回数据的中间经历过程
    这是一个古老的问题，即我们输入URL后按下回车到网页测呈现都发生了什么？加载过程到显示如下：1.根据域名，进行DNS域名解析；2.拿到解析的IP地址，建立TCP连接；3.向IP地址，发送HTTP请求；4......
  • 前端CSS Flex布局8大重难点知识，收藏起来吧
    2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99