python day50

其他 2019-09-11 19:01:36 阅读次数: 0

Bootstrap框架

生产环境下载

https://v3.bootcss.com/getting-started/#download

CDN简介(内容分发网络)

https://www.bootcdn.cn/

bootstrap文件划分

  • js

    只需要留一个bootstrap.min.js即可

  • css

    只需要一个bootstrap.min.css即可

  • fonts

    都是必须的，不需要我们手动导入，js文件会自动查找导入对于的fonts文件

注意

bootstrap中的js文件依赖于jQuery，所以使用bootstrap需要先导入jQuery

实际网站示例

https://www.youzhan.org/

Normalize.css(不同浏览器样式一致性)

布局容器

  • container与container-fluid

栅格系统

  • row(行)

  • col(列)

<style>
        .red {
            background-color: red;
            border: 3px solid green;
            height: 100px;
        }
</style>
<div class="container">
    <div class="row">
        <div class="col-md-6 red"></div>
        <div class="col-md-6 red"></div>
    </div>
</div>
<!--
        6，6
        2，10
        1～12
        再次理解class里面写的属性值到底是干啥的
-->
<!--借助谷歌浏览器自动切换手机或电脑屏幕，只需要加一个col-xs-6生成对应的布局-->

媒体查询

<style>
                .c1 {
            background-color: red;
        }
        @media screen and (max-width: 600px){
            .c1 {
                background-color: green;
            }
        }
</style>                
<div class="col-md-6 red c1"></div>

响应式列重置

<style>
                .c2 {
            background-color: red;
        }
        .c3 {
            height: 60px;
        }
</style>
<div class="container">
    <div class="row">
  <div class="col-xs-6 col-sm-3 c3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
</div>
</div>

列偏移

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

排版

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="lead">...</p>
<mark>highlight</mark>
<!--两者效果一样，但是语义不一样-->
<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>
​
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
​
​
<!--列表组-->
<ul class="list-unstyled">
  <li>...</li>
</ul>
​
<ul class="list-inline">
  <li>...</li>
</ul>

表格标签

<table class="table table-bordered table-hover table-striped"></table>
<tr class="active">...</tr>

表单

  • 登陆示例

  • input框提示信息显影

按钮

<button class='btn-success/btn-info/btn-primary/btn-danger/btn-warning'>
  // 按钮
</button>

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

组件

<!--字体图标 意味着操作它跟操作普通文本一样   爱心图标举例-->
<!--图标大小可以通过调span标签所在的父标签调节-->

Font-Awesome简介

  • css

  • fonts

标签页

  • 实际应用场景 >>> 购物网站物品各类信息(JS插件标签页)

JS插件

模态框

  • data参数绑定

    <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

  • 自定义代码

$('#myModal').modal('show/hide')

sweetalert插件

https://lipis.github.io/bootstrap-sweetalert/

下载只需要用dist文件夹

swal('标题')
swal('标题','文本')
swal('标题','文本'，'success')
swal('标题','文本','warning')
swal('标题','文本','info')
swal('标题','文本','error')

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="D:\Bootstrap\bootstrap-3.3.7-dist\fonts" rel="stylesheet">
    <link href="D:\Pycharm\day50\sweetalert\dist\sweetalert.css" rel="stylesheet">
    <link href="D:\Pycharm\day50\sweetalert\dist\sweetalert.min.js" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">图书管理系统</a>
    </div>
​
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">链接 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">链接</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他操作 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">苟</a></li>
            <li><a href="#">利</a></li>
            <li><a href="#">国</a></li>
            <li><a href="#">家</a></li>
            <li><a href="#">生</a></li>
            <li><a href="#">死</a></li>
            <li><a href="#">已</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="搜索">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">登录用户</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">岂</a></li>
            <li><a href="#">因</a></li>
            <li><a href="#">祸</a></li>
            <li><a href="#">福</a></li>
            <li><a href="#">避</a></li>
            <li><a href="#">趋</a></li>
            <li><a href="#">之</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
        <div class="col-md-3">
            <div class="list-group">
            <a href="#" class="list-group-item active">我是你爸</a>
            <a href="#" class="list-group-item">我是你爸的爸</a>
            <a href="#" class="list-group-item">我是你爸的爸的爸</a>
            <a href="#" class="list-group-item">我是你爸的爸的爸的爸</a>
            <a href="#" class="list-group-item">我是你爸的爸的爸的爸的爸</a>
            </div>
        </div>
        <div class="col-md-9">
                <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 class="panel-title">图书搜索系统<span class="glyphicon glyphicon-book
pull-right"></span></h3>
                  </div>
                  <div class="panel-body">
                      <form class="form-inline">
                          <div class="form-group">
                            <label class="sr-only" for="exampleInputAmount">搜索</label>
                            <div class="input-group">
                              <input type="text" class="form-control" id="exampleInputAmount" placeholder="搜索">
                            </div>
                          </div>
                          <button type="submit" class="btn btn-primary" >搜索</button>
                          <button type="button" class="btn btn-success pull-right">新增</button>
                        </form>
                      <br>
                    <table class="text-center table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">id</th>
                                <th class="text-center">书名</th>
                                <th class="text-center">价格</th>
                                <th class="text-center">作者</th>
                                <th class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>某哦某</td>
                                <td>999</td>
                                <td>某某</td>
                                <td>
                                    <a href="" class="btn btn-primary">编辑</a>
                                    <a href="" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>某哦某</td>
                                <td>999</td>
                                <td>某某</td>
                                <td>
                                    <a href="" class="btn btn-primary">编辑</a>
                                    <a href="" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>某哦某</td>
                                <td>999</td>
                                <td>某某</td>
                                <td>
                                    <a href="" class="btn btn-primary">编辑</a>
                                    <a href="" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>某哦某</td>
                                <td>999</td>
                                <td>某某</td>
                                <td>
                                    <a href="" class="btn btn-primary">编辑</a>
                                    <a href="" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                  </div>
​
                </div>
            </div>
​
    </div>
</div>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/zhukaijian/p/11508019.html
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022