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

CSS样式设置

1.常用显示样式

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

2.样式文件的位置

bootstrap框架

less语言处理:一门向后兼容的 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>将变变量中的值放到里面显示

<placeholder>对输入框文本提示

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

 <Disabled>按钮不能点击

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

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

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

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