30行代码实现一个进度条组件

来源:http://www.chinese-glasses.com 作者:Web前端 人气:182 发布时间:2020-04-22
摘要:时间: 2019-09-20阅读: 143标签: 组件 一. bootstrap-全局css样式-栅格布局系统-重点难点 30行js和30行css实现一个进度条组件,关键在于运用css变量。 所有的行必须放在容器中.container或containe

时间: 2019-09-20阅读: 143标签: 组件

一. bootstrap-全局css样式-栅格布局系统-重点难点

30行js和30行css实现一个进度条组件,关键在于运用css变量。

  1. 所有的行必须放在容器中.container或container-fluid

            container
       screen>1200px(超大PC显示器-lg)  容器宽1170px
       screen>992px(普通PC显示器-md)   容器宽970px
       screen>768px(平板显示器-sm)     容器宽750px
       screen<768px(手机显示器-xs)     容器宽auto
    

    container-fluid: width:auto+befor+after

  2. 分为多行,一行最多分为12列

  3. 网页内容只能放在列中,不能放到行中

  4. 可以在col中再嵌套row

  5. col分为四大类 col-xs-i col-sm-i col-md-i col-lg-i, i值可以为1-12,值为某个列的宽度

  6. 可以为一个列指定不同屏幕下的宽度

  7. col-lg-i 大PC
    col-md-i 大PC 普通PC
    col-sm-i 大PC 普通PC 平板
    col-xs-i 大PC 普通PC 平板 手机

  8. hidden-lg 大PC
    hidden-md 普通PC
    hidden-sm 平板
    hidden-xs 手机

  9. 列的偏移问题

    col-xs-offset-i 大PC 普通PC 平板 手机
    col-sm-offset-i 大PC 普通PC 平板
    col-md-offset-i 大PC 普通PC
    col-lg-offset-i 大PC
    

    一行中放一列
    一行中放多列
    一个行中指定不同宽度的列
    一个列中指定不同屏幕下的不同宽度
    不同屏幕下列宽的有效范围

  10. 使用栅格系统实现响应式布局

预览图代码Javascript

11.补充.

import React from 'react';import PropTypes from 'prop-types';import Styles from './main.module.scss';/** * * 传入percent,生成进度条 * @param {*} { percent } 进度条进度控制 * @bgColor {*} { percent } 进度条背景颜色 * @returns jsx */export default function ProgressBar({ percent, bgColor }) { if (percent  0 || percent  100) { console.error(new Error('percent value must between 0 - 100')); return null; } return ( div className={Styles.progress} style={{ '--percent': percent, '--bgColor': bgColor }} / );}ProgressBar.propTypes = { percent: PropTypes.number, bgColor: PropTypes.string,};ProgressBar.defaultProps = { percent: 50, bgColor: '#2486ff',};
  1) web开发页面布局可以采用的方式

      1) 使用table做布局

         简单不易出错,但加载效率低

      2) HTML+CSS

         加载速度快,灵活,不易控制


      3)使用bootstrap提供的栅格(grid layout)布局系统

          加载速度快,灵活,支持响应式功能,容易控制(有行和列的概念)

  2) css相关知识

      1) 如何解决父元素的第一个子元素margin-top越界问题

         给父元素加border-top
         给父元素指定padding-top
         给父元素指定overflow:hidden
         让该元素不是第一个子元素
         为父元素添加前置内容生成-推荐使用
          .parent:before {
             content:" ";
             display:table;
          }

      2) 如果解决所有子元素浮动后,父元素高度变为0,且影响后续元素

         给父元素指定overflow:hidden
         为父元素指定高度
         为父元素添加后置内容生成-推荐使用
           .parent:after {

             content:"";
             display:table;
             clear:both;
           }

  3) bootstrap系统中容器的特点

     宽度做了媒体查询
     添加了前置和后置内容生成,可以防止子元素的越界,浮动影响

CSS

二. bootstrap-全局css样式-表单-重点难点

.progress { width: 100%; height: 17px; margin: 5px; color: #fff; background-color: #f1f1f1; font-size: 12px;}.progress::before { counter-reset: percent var(--percent); /*文字显示*/ content: counter(percent) "%"; display: inline-block; /*宽度计算*/ width: calc(100% * var(--percent) / 100); max-width: 100%; height: inherit; text-align: right; background-color: var(--bgColor); transition:width 2s; animation: progress 1s ease forwards;}@keyframes progress { from { width: 0; } to { width: calc(100% * var(--percent) / 100); }}
1. bootstrap中的表单分为三种

  1) 默认表单

      <form>

         <div class="form-group">
           <label class="control-label"></label>

           <input class="form-control">


         </div>

         //bootstrap指定:单选和双选按钮要放到label标签中

         <div class="checkbox">
         <label>
             <input type="checkbox">我接受本站的使用条款
         </label>
         </div>

      </form>

  2) 行内表单

     给表单添加form-inline即可

  3) 水平表单


     默认的栅格系统:container->row->col-*
     默认的栅格系统:form-horizontal->form-group->col-*

三. bootstrap-组件-图标字体

本文由10bet发布于Web前端,转载请注明出处:30行代码实现一个进度条组件

关键词:

最火资讯