boot脚本 python boot script

转载

IT剑客之家 2023-07-25 21:53:26

文章标签 boot脚本 python html css bootstrap 文章分类 Python 后端开发

一、Bootstrap简介

bootstrap是Twitter公司的两名前端设计师设计的。
bootstrap是一款基于HTML、CSS和JavaScript的一个前端框架。

bootstrap的特点：

是以移动设备优先。
bootstrap适用于所有的主流浏览器，解决了浏览器兼容问题。

二、Bootstrap环境

http://v3.bootcss.com/getting-started/#download下载用于生产环境的bootstrap。

解压bootstrap的压缩包。

boot脚本 python boot script_html

下载jQuery的js文件

根据

https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js地址去获取对应版本的js文件，有两种方式。

①由地址，我们可以知道jquery的版本是1.12.4，那么我们就可以去jQuery的官网下载对应的版本。
②通过上面的地址，跳转到对应的地址，然后就会看到对应的js文件，保存到指定的位置即可。

使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议）

Bootstrap 中文网联合又拍云共同为 Bootstrap 专门构建了免费的 CDN 加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootCDN 还对大量的前端开源工具库提供了 CDN 加速服务

三、基本模板

boot脚本 python boot script_boot脚本 python_02

<!-- 移动设备优先 -->
    <!--
        屏幕和设备的宽度保持一致，初始缩放为1:1
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

四、布局容器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>container</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: darkgray;height: 1000px" class="container-fluid"> </div>  //可视窗口左右两边有留空白
<div style="background-color: darkgray;height: 1000px" class="container"></div>   // 占满整个可视窗口

</body>
</html>

五、栅格系统

1. row必须放到container和container-fluid里面
2. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

3、列的样式 .col-xx（lg md sm xs）-数字（1~12）

　　container有一个padding是15px
　　row有一个margin是-15px

　　列是支持嵌套的

　　列偏移： col-xx-offset-数字（1~12）
　　列排序： .col-md-pull-数字 .col-md-push-数字

boot脚本 python boot script_boot脚本 python_03

boot脚本 python boot script_css_04

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>12-列偏移排序示例</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
    <!--列偏移-->
<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-offset-3" style="background-color: red">111</div>
    </div>

    <!--列排序-->

    <div class="row">
      <div class="col-md-9 col-md-push-3">本来应该在左边.col-md-9 .col-md-push-3</div>
      <div class="col-md-3 col-md-pull-9" style="background-color:green ">本来应该在右边.col-md-3 .col-md-pull-9</div>
    </div>
</div>
</body>
</html>

列排序偏移

栅格参数：

boot脚本 python boot script_boot脚本 python_05

boot脚本 python boot script_boot脚本 python_03

boot脚本 python boot script_css_04

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>08-row示例</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
    <div class="row" style="background-color: red">
        <div class="col-md-1" style="border: 1px solid black">111</div>
        <div class="col-md-1" style="border: 1px solid black">222</div>
        <div class="col-md-1" style="border: 1px solid black">333</div>
        <div class="col-md-1" style="border: 1px solid black">444</div>
        <div class="col-md-1" style="border: 1px solid black">555</div>
        <div class="col-md-1" style="border: 1px solid black">666</div>
        <div class="col-md-1" style="border: 1px solid black">777</div>
        <div class="col-md-1" style="border: 1px solid black">888</div>
        <div class="col-md-1" style="border: 1px solid black">999</div>
        <div class="col-md-1" style="border: 1px solid black">101010</div>
        <div class="col-md-1" style="border: 1px solid black">111111</div>
        <div class="col-md-1" style="border: 1px solid black">121212</div>
    </div>


    <div class="row" style="background-color: red">
        <div class="col-md-6" style="border: 1px solid black">111</div>
        <div class="col-md-6" style="border: 1px solid black">222</div>
    </div>

    <div class="row" style="background-color: red">
        <div class="col-md-8" style="border: 1px solid black">111</div>
        <div class="col-md-4" style="border: 1px solid black">222</div>
    </div>


    <div class="row" style="background-color: green">
        <div class="col-xs-8 col-md-12" style="border: 1px solid black">111</div>
        <div class="col-xs-4 col-md-12" style="border: 1px solid black">222</div>
    </div>

    <!--背景为绿的会在屏幕是超小屏幕的时候显示在一行8格和4格，其他红色背景的会变成一行，变成中等屏幕则相反（）绿变成两行，红是正常-->

</div>

</body>
</html>

示例

boot脚本 python boot script_boot脚本 python_03

boot脚本 python boot script_css_04

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>09-CSS媒体查询示例</title>
    <style>
        .c1 {
            background-color: red;
        }

        @media screen and (max-width: 600px){
            /*意思就是屏幕显示大于600px，用外面的css，小于等于600用我自己的样式*/
            .c1 {
                background-color: green;
            }
        }
    </style>
</head>
<body>

<div class="c1" style="height: 400px;width: 400px"></div>
</body>
</html>

示例二

六、排版示例

在element选中复制，右击

boot脚本 python boot script_html_10

boot脚本 python boot script_boot脚本 python_03

boot脚本 python boot script_css_04

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>排版示例</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <h1>h1 36px</h1>
    <h2>h2 30px</h2>
    <h3>h3 24px</h3>
    <h4>h4 18px</h4>
    <h4>h5 14px</h4>
    <h4>h6 12px</h4>

    <h1>大标题
        <small>小标题</small>
    </h1>

    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.
        Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    <p class="lead">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida
        at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
        elit.</p>  <!--突出重点-->

    <div>You can use the mark tag to
        <mark>highlight</mark>  <!--高亮显示，突出点-->
        text.
    </div>

    <!--被删除的文本-->
    <del>This line of text is meant to be treated as deleted text.</del>
    <s>This line of text is meant to be treated as no longer accurate.</s>

    <!--无用文本-->
    <ins>This line of text is meant to be treated as an addition to the document.</ins>
    <u>This line of text will render as underlined</u>
    <!--文本在显示上无区别，语意一个是没有用的，一个是删除了得到-->

    <!--插入文本-->
    <!--显示This line of text is meant to be treated as an addition to the document.-->
    <ins>This line of text is meant to be treated as an addition to the document.</ins>

    <!--带下划线的文本-->
    <!--显示This line of text will render as underlined-->
    <u>This line of text will render as underlined</u>

    <!--着重-->
    <p>小轩轩 <strong>不爱上课</strong></p>

    <!--斜体-->
    <p>小轩轩 <em>不爱上课</em></p>


    <p class="text-left">Left aligned text.</p>  文本左对齐
    <p class="text-center">Center aligned text.</p>   文本在中间
    <p class="text-right">Right aligned text.</p>   文本右对齐
    <p class="text-justify">Justified text.</p>   文本两端对齐
    <p class="text-nowrap">No wrap text.</p>


    <p class="text-lowercase">Lowercased text.</p>    全小写
    <p class="text-uppercase">Uppercased text.</p>     全大写
    <p class="text-capitalize">Capitalized text.</p>    首字母大写


    <abbr title="帅B">SB</abbr>   鼠标悬浮到sb上面显示帅B（解释）


    <blockquote>
        <p>技术的提升只是量的积累，思想的提升才是质的飞跃。</p>
    </blockquote>

    <blockquote>
        <p>技术的提升只是量的积累，思想的提升才是质的飞跃。</p>
        <footer>老男孩语录</footer> // -语录
    </blockquote>

    <blockquote class="blockquote-reverse">
        <p>技术的提升只是量的积累，思想的提升才是质的飞跃。</p>
        <footer>老男孩语录</footer>
    </blockquote>

    <ul class="list-unstyled">
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li>
      <li>Nulla volutpat aliquam velit
        <ul>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
          <li>Vestibulum laoreet porttitor sem</li>
          <li>Ac tristique libero volutpat at</li>
        </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ul>

    <!--多用于菜菜单-->
    <ul class="list-inline">
      <li>Lorem ipsum</li>
      <li>Phasellus iaculis</li>
      <li>Nulla volutpat</li>
    </ul>

    <code><div></div></code>

    <div style="height: 100px"></div>
</div>
</body>
</html>

示例

七、表格示例

boot脚本 python boot script_boot脚本 python_03

boot脚本 python boot script_css_04

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>表格示例</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>


<div class="container">
    <!--table基本表格，table-striped条纹状表格，table-bordered带边框的表格，table-hover速表悬停的状态-->
    <table class="table table-striped table-bordered table-hover">
        <caption>Optional table caption.</caption>
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>

    <!--table-condensed紧缩表格，单元格中的内补（padding）均会减半-->
    <table class="table table-striped table-bordered table-hover table-condensed">
        <caption>Optional table caption.</caption>
        <thead>
        <!--状态类-->
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr class="success">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr class="info">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="warning">
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
             <tr class="danger">
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
    <!--响应式表格-->
    <!--将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，
    其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。-->
    <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover table-condensed">
        <caption>Optional table caption.</caption>
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr class="success">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr class="info">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="warning">
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
             <tr class="danger">
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
    </div>
</div>

</body>
</html>

View Code

boot脚本 python boot script_bootstrap_15

八、表单

boot脚本 python boot script_css_16

一个input框

boot脚本 python boot script_boot脚本 python_17

input框加图标

boot脚本 python boot script_bootstrap_18

文本域

<textarea class="form-control" rows="3"></textarea>   rows控制文本的高度，3行


disabled不能够被选中

boot脚本 python boot script_boot脚本 python_03

boot脚本 python boot script_css_04

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>checkbox和radio示例</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="radio">  圆
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option2">
            这个你可以选
        </label>
    </div>

    <div class="checkbox">  方，多选
        <label>
            <input type="checkbox" name="optionsRadios" id="optionsRadios2" value="option2">
            这个你也可以选
        </label>
    </div>

    <div class="radio disabled"> //disabled不能够被选中
        <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
            这是一个不可选的radio
        </label>
    </div>
</div>
</body>
</html>

多选与单选

横着摆

.checkbo-inline或.radio-inline

下拉列表（select）

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple class="form-control">  可以多选

静态控件

boot脚本 python boot script_bootstrap_21

即使没有输入框也是对齐的，像改密码那样

boot脚本 python boot script_bootstrap_22

boot脚本 python boot script_boot脚本 python_03

boot脚本 python boot script_css_04

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>表单示例</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
<!--获取焦点-->
<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <p class="form-control-static">email@example.com</p>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input disabled type="password" class="form-control" id="inputPassword" placeholder="Password">
                <!--加个disabled不能被选中（禁用）-->
            </div>
        </div>
    </form>


    <form>
        <div class="form-group has-success">  //正确
            <label class="control-label" for="inputSuccess1">Input with success</label>
            <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
            <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
        <div class="form-group has-warning">  //警告
            <label class="control-label" for="inputWarning1">Input with warning</label>
            <input type="text" class="form-control" id="inputWarning1">
        </div>
        <div class="form-group has-error">  // 错误
            <label class="control-label" for="inputError1">Input with error</label>
            <input type="text" class="form-control" id="inputError1">
        </div>
    </form>


    <input class="form-control input-lg" type="text" placeholder=".input-lg">
    <input class="form-control" type="text" placeholder="Default input">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">
</div>
</body>
</html>

表单实例

boot脚本 python boot script_bootstrap_25

###########################3

boot脚本 python boot script_html_26

九、按钮示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>按钮示例</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <input type="button" value="默认的按钮">
    <input class="btn " type="button" value="默认的按钮">
    <input class="btn btn-primary" type="button" value="默认的按钮">
    <input class="btn btn-info" type="button" value="默认的按钮">
    <input class="btn btn-success" type="button" value="默认的按钮">
    <input class="btn btn-warning" type="button" value="默认的按钮">
    <input class="btn btn-danger" type="button" value="默认的按钮">

    <button class="btn btn-success">button</button>
    <button class="btn btn-success btn-lg">button</button>
    <button class="btn btn-success btn-sm">button</button>
    <button class="btn btn-success btn-xs">button</button>

    <a href="" class="btn btn-success">a</a>

    <button class="btn btn-success btn-block">btn-block</button>
    <button class="btn btn-success btn-block" disabled="disabled">btn-block</button>

    <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

</div>
</body>
</html>

十、图片、文本、快速浮动示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>图片和文本颜色示例</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <img src="Bootstrap_i2.png" alt="..." class="img-rounded">
    <img src="Bootstrap_i2.png" alt="..." class="img-circle hidden">  <!--//隐藏-->
    <img src="Bootstrap_i2.png" alt="..." class="img-circle">
    <img src="Bootstrap_i2.png" alt="..." class="img-thumbnail">

    <!--文本颜色-->
    <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

    <!--文本背景颜色-->
    <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

    <!--快速浮动-->
    <div>
        <button class="btn btn-primary pull-right">按钮1</button>
        <button class="btn btn-success">按钮2</button>
    </div>

      <div>
        <button class="btn btn-primary">按钮1</button>
        <button class="btn btn-success">按钮2</button>
    </div>

     <div>
        <button class="btn btn-primary">按钮1</button>
        <button class="btn btn-success pull-right">按钮2</button>
    </div>
</div>
</body>
</html>

响应式工具

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>visible响应式工具</title>
    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <button class="btn btn-primary visible-xs-block">按钮</button>
    <button class="btn btn-primary visible-md-block">按钮2</button>
</div>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。