PYTHON第六十三天笔记11.22

一、自记录

前情回顾：

bootstrap

lg md sm xs：分别表示超大屏、普通电脑屏幕、平板、手机屏幕像素。

class=“col-md-6 col-xs-8”，设置两个的话是在普通屏幕显示6个格，手机显示8个格子。

列的嵌套又是重新分出了12份格子；再重新平分即可。

都是清除当前的样式的作用：

Float:none;

Diaplay:flex;

【Pycharm: 选中ctrl+r 替换】

垂直居中样式：

.vertical-center {

display: flex; //清除样式

align-items: center;

}

水平居中样式：

.col-centered {

float: none; //清除样式

margin: 0 auto;

}

二、重点案例：

1 导航条

<!--导航区开始-->
        <ul class="nav nav-tabs nav-stacked" role="tablist">
          <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
          <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
          <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
        </ul>
        <!--导航区结束-->

        <!--面板区开始-->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
          <div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
          <div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
        </div>
        <!--面板区结束-->

2 让导航条固定在顶部

添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置 padding。代码如下（提示：导航条的默认高度是 50px）：

body { padding-top: 70px; }

(附)：
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。你不用给 body 添加任何内补（padding）。

3 反色导航条

<nav class="navbar navbar-inverse">
  ...
</nav>

三、课上笔记

day63 

1. 前情回顾
2. 今日概要

    Bootstrap3居中处理：
        水平居中：
            - .center-block 不涉及到列的居中 本质上就是 margin: 0 auto 
            让那个标签居中就把它写在哪个标签的样式类中
            
            - 我们自定义的居中 在涉及到列的居中时使用
                .col-centered {
                  float: none;
                  margin: 0 auto;
                }
            - 文本类居中或者display: inline
                .text-center
                
        垂直居中：
            .vertical-center {
              display: flex;
              align-items: center;
            }
            
            
            用在父标签中，让子块级标签垂直居中
            
    Bootstrap组件：
        图标：
            span标签，里面加上样式类
            glyphicon glyphicon-piggy-bank
            
        下拉菜单：  后面我们就要用到bootstrap.js --> 之前还要引用jQuery.js
        
        
        按钮组
            .btn-group
        
            .btn-toolbar
        
            尺寸
            
        分列式下拉菜单按钮
        
        
        .css 和.min.css的区别是：
            .min.css是压缩版的，用于生产环境的，因为它把多余的空格都去掉了，体积很小
            .css 是没有压缩的
            
            我们现在是开发阶段，用哪个都可以
            
        .min.js
        .js
            同上
            
            
        js文件我们通常放在body标签里面的最下面
        除非你的js代码就必须在文档加载之前运行，这个时候要放在head标签里面
        
            
    导航
    
        <!--导航区开始-->
        <ul class="nav nav-tabs nav-stacked" role="tablist">
          <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
          <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
          <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
        </ul>
        <!--导航区结束-->

        <!--面板区开始-->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
          <div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
          <div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
        </div>
        <!--面板区结束-->

    
        .nav-tabs         --> tab式
        .nav-pills       --> 胶囊式
        .nav-justified   --> 两端对齐
        
    导航条
    
        .navbar-btn
        .navbar-text
        .navbar-left .navbar-right  --> 在导航条里面用左右浮动的化需要使用这俩个
        .navbar-link
        
    **导航条不需要放在.container里面**
    
        .navbar-fixed-top            --> 固定在顶部
        如果使用了上面固定在顶部的样式，那么就需要给body设置padding
        body { padding-top: 70px; }
        
        .navbar-static-top           --> 静止在顶部
        
        .navbar-inverse              --> 反色
        
    面包屑导航/路径导航
        <ol class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ol>
        
    分页
        
    
    翻页
            

    标签
        .label 
        
    徽章
        微信未读消息
        个人中心通知的提示
        
    巨幕
        铺满整个屏幕
            <div class="jumbotron">
                <div class="container">
                    <h1>Hello, world!</h1>
                    <p>...</p>
                    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
                </div>
            </div>
            
    页头
    
    缩略图  --> 前女友的页面
    
    进度条
        应用场景：
            - 上传下载加载
            - 体现步骤进度
        
        <div class="progress">
          <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            60%
          </div>
        </div>
        
        .progress-bar-striped 条纹状进度条        
        动起来
            .active 
            
        颜色
            .progress-bar-success
            .progress-bar-warning
            .progress-bar-info
            .progress-bar-danger

    媒体对象
        后面写项目会用到
        
        .media-left
        .media-body
        .media-right
        
        头像的位置：
            .默认
            .media-middle   --> 中间
            .media-bottom   --> 底部
        
    列表组
        外面的div加这个样式： .list-group
        里面的元素加这个样式: .list-group-item
    
    面板
    
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">这里写标题</h3>
          </div>
          
          <div class="panel-body">
            这里面是内容
          </div>
          
          <div class="panel-footer">Panel footer</div>
        </div>
        
    Well
            
3. 今日作业
    1. 信息收集页面
    2. 修改后台管理那个模板
    3. 修改博客那个页面
    4. 前女友那个页面（前面是那个写完了的可以继续尝试一下这个/可选）