时间: 2019-09-20阅读: 143标签: 组件
一. bootstrap-全局css样式-栅格布局系统-重点难点
30行js和30行css实现一个进度条组件，关键在于运用css变量。
所有的行必须放在容器中.container或container-fluid
container screen>1200px(超大PC显示器-lg) 容器宽1170px screen>992px(普通PC显示器-md) 容器宽970px screen>768px(平板显示器-sm) 容器宽750px screen<768px(手机显示器-xs) 容器宽autocontainer-fluid: width:auto+befor+after
分为多行，一行最多分为12列
网页内容只能放在列中，不能放到行中
可以在col中再嵌套row
col分为四大类 col-xs-i col-sm-i col-md-i col-lg-i， i值可以为1-12，值为某个列的宽度
可以为一个列指定不同屏幕下的宽度
col-lg-i 大PC
col-md-i 大PC 普通PC
col-sm-i 大PC 普通PC 平板
col-xs-i 大PC 普通PC 平板 手机hidden-lg 大PC
hidden-md 普通PC
hidden-sm 平板
hidden-xs 手机列的偏移问题
col-xs-offset-i 大PC 普通PC 平板 手机 col-sm-offset-i 大PC 普通PC 平板 col-md-offset-i 大PC 普通PC col-lg-offset-i 大PC一行中放一列
一行中放多列
一个行中指定不同宽度的列
一个列中指定不同屏幕下的不同宽度
不同屏幕下列宽的有效范围使用栅格系统实现响应式布局
预览图代码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行代码实现一个进度条组件
关键词：