第五章 前端开发——Boostrap

2020年08月18日 阅读数:17
这篇文章主要向大家介绍第五章 前端开发——Boostrap,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

第五章 前端开发学习——Boostrapcss

 

1、Bootstrap基础html

2、Bootstrap布局前端

3、Bootstrap组件jquery

4、Bootstrap插件git

5、补充拓展sweetalert插件github

 

1、Bootstrap基础web

什么是Bootstrap(what):ajax

由Twitter的设计师Mark Otto和Jacob Thornton合做开发,是一个CSS/HTML框架 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。bootstrap

Bootstrap版本:浏览器

Bootstrap二、Bootstrap三、Bootstrap4

Bootstrap下载:(前往官网自行下载)

  • 用于生产环境 的Bootstrap(CSS\JavaScript)(用这种)

  • Bootstrap LESS源码 (LESS是CSS预处理器)

  • Bootstrap SASS源码(SASS也是CSS预处理)

Bootstrap CDN服务:

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件(通常不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 以前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

目录结构:

生产环境版:

 

导入步骤:

①Bootstrap的js特效是基于jQuery写的,在导入Bootstrap前,必须先导入jQuery库。

②导入css样式

 

2、Bootstrap布局

 1.响应式布局

A)手机屏幕的分辨率

  • 如今绝大部分 手机 视网膜屏幕, 有物理分辨率,和 渲染分辨率。 iphone8 750*1334 渲染分辨率: 375*667

  • 手机浏览器 为了让 没有作响应式处理的网页可以正常显示, 自动进行缩放。视口的大小一般会设置为 980px

B)媒体查询

根据多种媒体可能写多种media对应的css样式

@media (min-width:) {
    选择器 {
      
    }
    选择器 {
        
    }
}
<style>
        body {
            margin:0;
        }

        /*默认 <768px 手机 */
        .container {
            margin:0 auto;
            width:100%;
            height:400px;
            text-align: center;
            background: pink;
        }

        /*媒体查询*/

        /* >= 768  < 992   小屏幕  平板 */
        @media (min-width:768px) {
            .container {
                width:750px;
            }
            .row {

            }
        }
        
        /* >=992 <1200  中等屏幕 */
        @media (min-width:992px) {
            .container {
                width: 970px;
            }
        }
        
        /*>=1200 大屏幕*/
        @media (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>

 

媒体特效:
min-width
min-height
max-width
max-height
width
height
.........

C)移动设备优先

为了确保适当的绘制和触屏缩放,须要在 <head> 之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上,经过为视口(viewport)设置 meta 属性为 user-scalable=no 能够禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感受。注意,这种方式咱们并不推荐全部网站使用,仍是要看你本身的状况而定!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

user-scalable=no  不容许缩放

initial-scale=1        缩放比例

maximum-scale=1最大缩放比例

minimum-scale=1 最小缩放比例

 

 2.栅格系统

A)布局容器

Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。咱们提供了两个做此用处的类。注意,因为 padding 等属性的缘由,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度,占据所有视口(viewport)的容器。

<div class="container-fluid">
  ...
</div>

 

B)栅格系统简介

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增长,系统会自动分为最多12列。

栅格系统用于经过一系列的行(row)与列(column)的组合来建立页面布局,你的内容就能够放入这些建立好的布局中。下面就介绍一下 Bootstrap 栅格系统的工做原理:

  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 经过“行(row)”在水平方向建立一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,而且,只有“列(column)”能够做为行(row)”的直接子元素。
  • 相似 .row 和 .col-xs-4 这种预约义的类,能够用来快速建立栅格布局。Bootstrap 源码中定义的 mixin 也能够用来建立语义化的布局。
  • 经过为“列(column)”设置 padding 属性,从而建立列与列之间的间隔(gutter)。经过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
  • 负值的 margin就是下面的示例为何是向外突出的缘由。在栅格列中的内容排成一行。
  • 栅格系统中的列是经过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可使用三个 .col-xs-4 来建立。
  • 若是一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被做为一个总体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 而且针对小屏幕设备覆盖栅格类。 所以,在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 而且针对小屏幕设备覆盖栅格类。 所以,在元素上应用任何 .col-lg-*不存在, 也影响大屏幕设备。

 

C)栅格参数

 

 

D)栅格系统使用

使用单一的一组 .col-md-* 栅格类,就能够建立一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一块儿的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。全部“列(column)必须放在 ” .row 内。

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

 

 E)列偏移(往右移多少)

使用 .col-md-offset-* 类能够将列向右侧偏移。这些类实际是经过使用 * 选择器为当前元素增长了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

 

 F)行和列

行 .row
列 col-xs-* col-sm-* col-md-* col-lg-*
把父元素分红12份,指定几份

 

G)表格

.table
.table-striped
.table-bordered
.table-hover
.table-condensed
.success .info .danger .warning .active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Bootstrap演示</title>
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <style>
    
    </style>
</head>
<body>
    
    <div class="container-fluid">
        <div class="page-header">
            <h1>表格</h1>
        </div>

        <div class="row">
            <div class="col-md-6">
                <table class="table table-bordered table-hover ">
                    <thead>
                        <tr class="success">
                            <th>序号</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>爱好</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>曹操</td>
                            <td>18</td>
                            <td></td>
                            <td>人妻</td>
                        </tr>
                        <tr class="active">
                            <td>1</td>
                            <td>曹操</td>
                            <td>18</td>
                            <td class="danger"></td>
                            <td>人妻</td>
                        </tr>
                        <tr class="danger">
                            <td>1</td>
                            <td>曹操</td>
                            <td>18</td>
                            <td></td>
                            <td>人妻</td>
                        </tr>
                        <tr class="warning">
                            <td>1</td>
                            <td>曹操</td>
                            <td>18</td>
                            <td></td>
                            <td>人妻</td>
                        </tr>
                        <tr class="info">
                            <td>1</td>
                            <td>曹操</td>
                            <td>18</td>
                            <td></td>
                            <td>人妻</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>曹操</td>
                            <td>18</td>
                            <td></td>
                            <td>人妻</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>曹操</td>
                            <td>18</td>
                            <td></td>
                            <td>人妻</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>曹操</td>
                            <td>18</td>
                            <td></td>
                            <td>人妻</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>曹操</td>
                            <td>18</td>
                            <td></td>
                            <td>人妻</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</body>
</html>
表格实例

 

H)表单

.form-horizontal
.from-group
.form-control
.control-label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Bootstrap演示</title>
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <style>
    
    </style>
</head>
<body>
    
    <div class="container-fluid">
        <div class="page-header">
            <h1 class="text-center">表单</h1>
        </div>
        
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <form action="#" class="">
                    <div class="form-group">
                        <label for="userInput">用户名:</label>
                        <input type="text" class="form-control" name="username" id="userInput">
                    </div>

                    <div class="form-group">
                        <label for="">密码:</label>
                        <input type="password" name="pwd" id="pwdInput" class="form-control">
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="" id=""> 记住我
                        </label>
                    </div>

                    <button class="btn btn-default btn-block">登 录</button>
                </form>
            </div>
        </div>
        
        <hr>

        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <form action="#" class="form-horizontal">
                    <div class="form-group">
                        <label for="userInput" class="col-md-4 control-label">用户名:</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" name="username" id="userInput">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="" class="col-md-4 control-label">密码:</label>
                        <div class="col-md-8">
                            <input type="password" name="pwd" id="pwdInput" class="form-control">
                        </div>
                        
                    </div>
                    
                    <div class="form-group">
                        <div class="col-md-8 col-md-offset-4">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="" id=""> 记住我
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="col-md-8 col-md-offset-4">
                            <button class="btn btn-default">登 录</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

</body>
</html>
表单实例

 

I)按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Bootstrap演示</title>
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <style>
        .row {
            margin-bottom: 40px;
        }
        img {
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    
    <div class="container-fluid">
        <div class="page-header">
            <h1>按钮</h1>
        </div>

        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-default">按钮</button>
                <button class="btn btn-info">按钮</button>
                <button class="btn btn-success">按钮</button>
                <button class="btn btn-warning">按钮</button>
                <button class="btn btn-danger">按钮</button>
                <button class="btn btn-primary">按钮</button>
            </div>

            <div class="col-md-4">
    
                <button class="btn btn-primary btn-lg">按钮</button>
                <button class="btn btn-primary">按钮</button>
                <button class="btn btn-primary btn-sm">按钮</button>

                <button class="btn btn-primary btn-block">按钮</button>
            </div>
        </div>

        <div class="row">
            <img src="images/product01.jpg" alt="">
            <img src="images/product01.jpg" alt="" class="img-rounded">
            <img src="images/product01.jpg" alt="" class="img-circle">
            <img src="images/product01.jpg" alt="" class="img-thumbnail">
        </div>
        
        
    </div>

</body>
</html>
按钮实例

 

3、Bootstrap组件

 1.Glyphicons 字体图标

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其余类共同存在。应该建立一个嵌套的 <span> 标签,并将图标类应用到这个 <span> 标签上。

图标类只能应用在不包含任何文本内容或子元素的元素上。

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

 

4、Bootstrap插件

 1.模态框

模态框通过了优化,更加灵活,以弹出对话框的形式出现,具备最小和最实用的功能集。

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

 

5、补充拓展sweetalert插件

点击下载Bootstrap-sweetalert项目

东西在dist文件夹里

 

$(".btn-danger").on("click", function () {
  swal({
    title: "确认删除?",
    text: "删除后没法恢复",
    type: "warning",
    showCancelButton: true,
    confirmButtonClass: "btn-danger",
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    closeOnConfirm: false
    },
    function () {
      var deleteId = $(this).parent().parent().attr("data_id");
      $.ajax({
        url: "/delete_book/",
        type: "post",
        data: {"id": deleteId},
        success: function (data) {
          if (data.status === 1) {
            swal("删除成功!", "请确认!", "success");
          } else {
            swal("删除失败", "please try again later", "error")
          }
        }
      })
    });
})

①success

 

②warning

③info

④error

 案例演示在这个位置

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sweetalert_demo</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
    <style>
        th {
            text-align: center;
        }
        .sweet-alert>h2 {
            padding-top: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">person管理</h3>
        </div>
        <div class="panel-body">
            <table class="table table-bordered" style="text-align: center">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操做</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in persons %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ p.name }}</td>
                            <td>{{ p.age }}</td>
                            <td>
                                <button class="btn btn-danger del"><i class="fa fa-trash-o"></i>删除</button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>




<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<script src="/static/jquery-3.3.1.js"></script>

<script>
    //找到删除按钮绑定事件
    $(".del").on("click", function () {
        swal({
          title: "弄肯定要删伐?",
          text: "万一删特就么了!",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: "btn-danger",
          confirmButtonText: "删删删",
          cancelButtonClass: "btn-primary",
          cancelButtonText: "取消",
          closeOnConfirm: false
        },
        function(){
          swal("Deleted!", "Your imaginary file has been deleted.", "success");
        });
    })
</script>
</body>
</html>
详解

 

转载于:https://www.cnblogs.com/neymargoal/p/9507511.html