1. 首页
  2. 全部文档
  3. 无代码图形化编程手册
  4. 前端及样式设计(6节)
  5. Bootstrap样式说明

Bootstrap样式说明

Bootstrap简单介绍

TERSUS开发时选用的当前主流使用的新移动应用模板,是集成Bootstrap样式框架的,Bootstrap是一个简洁、直观、强悍的前端开发框架,让web开发更迅速、简单

  • Bootstrap相关信息请参考:https://v2.bootcss.com/index.html
  • 集成的Bootstrap样式框架含有一套39个从变量到响应式样式定义的LESS文件(位置:TERSUS项目文件夹\web\styles\bootstrap)
  • 集成的Bootstrap样式框架中预定义了140个黑色和140个白色图标文件(位置:TERSUS项目文件夹\web\images\bootstrap),参考本章下一节“样式设计中图标使用”的说明
  • 注意所有文件中定义的样式类名称,都是用本章上一节“用样式类定义样式”一节中方式调用的

默认新建的新移动应用项目的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 导航条响应式处理样式