• 前端笔记---1


    1.bootstrap表格样式:

    ①代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    </head>
    
    <body>
    <!--table-bordered table-hover table-striped-->
    <table  class="table ">
      <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      </thead>
      <tbody>
        <tr>
          <td>雪飞</td>
          <td>16</td>
        </tr>
        <tr>
          <td>得港</td>
          <td>19</td>
        </tr>
        <tr>
          <td>大壮</td>
          <td>48</td>
        </tr>
      </tbody>
    </table>
    
    </body>
    </html>
    

    ②显示结果图如下

    image-20200620190018540

    ③常用属性

    <table  class="table table-bordered table-hover table-striped">
        
    table:表格
    table-bordered:加边框
    table-hover:选中某行背景颜色加灰 
    table-striped:隔行加灰    
    

    ④用cdn引入

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    

    2.布局容器:

    ①两边留白

    <style>
        .cc{
          background-color: red;
          height: 200px;
        }
      </style>
    
    
    <div class="container cc">
    </div>
    

    image-20200620193005996

    ②布满全屏

    <style>
        .cc{
          background-color: red;
          height: 200px;
        }
      </style>
    
    
    <div class="container-fluid cc">
     </div>
    

    image-20200620193123585

    3.栅格系统:

    <div class="col-xs-2 c2">
    自动适应屏幕:col-xs-x
    
    <div class="col-md-2 c2 col-md-offset-5">
    右偏移:col-md-offset-x    
    

    4.排版:

    ①引用bootstrap后标签会变的稍微好看些,副标题标签也会好看些

    标签

  • 相关阅读:
    find和findIndex原理
    npm相关依赖操作+版本问题
    package-lock锁文件作用
    npm的版本控制和切换
    package.json文件各个选项含义
    package.json中的script选项作用
    WPF学习之资源-Resources
    WPF中的ListBox实现按块显示元素的方法
    WPF中button按钮同时点击多次触发click解决方法
    浅谈WPF本质中的数据和行为
  • 原文地址:https://www.cnblogs.com/zhuxianxiaofan/p/13170248.html
Copyright © 2020-2023  润新知