TERSUS无代码开发(笔记04)-CSS样式设置

时间:2021-09-26 14:55:22

CSS样式设置

1.常用显示样式

大小尺寸 说明  间距边距 说明  各类颜色 说明 
width margin 外边距         color  颜色       
height padding 内边距 background-color  背景色
font-weight 字体加粗 float
浮动
   
font-size 字体大小 text-align 水平对齐    

2.样式文件的位置

bootstrap框架

less语言处理:一门向后兼容的 CSS 扩展语言.

TERSUS无代码开发(笔记04)-CSS样式设置

3.bootstrap文件夹中样式文件说明

文件名称 定义内容说明
001-reset.less 音/视频显示块定义、HTML页/图片/按钮/输入框显示位置及大小基本定义
002-variables.less 变量定义:常用的颜色值、链接/按钮/表格/布局/表单等元件等使用的颜色及字符大小的变量定义、Bootstrap图标文件地址定义
003-mixins.less Mixins可以将一部分需重用的样式抽出,只需定义一次,可被重复使用
004-scaffolding.less HTML 主体/链接/图片的默认样式
005-grid.less Grid网格对象中的样式定义
006-layouts.less 布局元件使用,定义一个container名称的样式类,并定义其中子元件显示样式
007-type.less 页面中字符样式定义、特别的字号、标题标签如h1 h2 h3…、表头样式、列表样式、缩写类样式、引用内容样式、地址样式
008-code.less 代码内容显示的样式
009-forms.less 表单的样式、带标签的输入框样式、各类输入框元件样式、勾选等元件样式
010-tables.less 表格对象的样式、基本样式/紧凑样式/带边框样式/斑马条样式/滑动变色样式/单元格大小样式/背景色样式等定义内容
011-sprites.less Bootstrap图标名称位置定义,黑色及白色类定义,注意对应的图标文件地址在002-variables.less有定义
012-dropdowns.less 下拉按钮的样式定义
013-wells.less 一种会引起内容凹陷显示或插图效果的容器样式定义
014-component-animations.less 渐变等动态效果样式
015-close.less 关闭图标的样式
016-buttons.less 按钮的样式定义,包括按钮颜色样式/尺寸/状态/背景色
017-button-groups.less 按钮组样式,按钮组中各类不同按钮显示样式
018-alerts.less 报警类提示类的样式,不同颜色定义
019-navs.less 导航类的样式定义
020-navbar.less 导航条的样式定义
021-breadcrumbs.less 面包屑导航样式定义
022-pagination.less 分页为每个页面做导航的样式
023-pager.less 翻页导航样式
024-modals.less 弹窗的样式,包括正常弹窗/大弹窗定义/弹窗头部样式/内部主体样式/底部样式定义
025-tooltip.less 工具提示框样式,包括提示框内部设定图标
026-popovers.less 简单弹窗样式,标题/内容/图标等样式
027-thumbnails.less 缩略图的样式
028-media.less 媒体类型的样式
029-labels-badges.less 标签显示及徽章类的样式
030-progress-bars.less 进度条样式定义
031-accordion.less 垂直手风琴效果样式
032-carousel.less 轮播图样式,控制及图中文字显示样式
033-hero-unit.less 巨幕样式,用于展示放大提示的样式
034-utilities.less 类对象属性的样式,如是否显示,靠左靠右等
035-responsive-utilities.less 响应式处理样式
responsive-767px-max.less 响应式处理样式,最大767px
responsive-768px-979px.less 响应式处理样式768px-979px
responsive-1200px-min.less 响应式处理样式,最小1200px
responsive-navbar.less 导航条响应式处理样式

 4.H5标签属性

<Value>将变变量中的值放到里面显示
TERSUS无代码开发(笔记04)-CSS样式设置

TERSUS无代码开发(笔记04)-CSS样式设置

<readonly>对输入框限制设置为禁止输入数据

TERSUS无代码开发(笔记04)-CSS样式设置

 <Disabled>按钮不能点击

TERSUS无代码开发(笔记04)-CSS样式设置

 <Visible>是否显示(也可以不隐藏其它显示元件)

TERSUS无代码开发(笔记04)-CSS样式设置

===============================================================================================

上一篇:TERSUS无代码开发(笔记03)-常用快捷键

下一篇:TERSUS无代码开发(笔记05)-简单实例电脑端页面设计