HTML5App商业开发实战教程基于WeX5可视化开发平台电子资源 教学全套课件配套资源6-2 常用样式.pptxVIP

CSS常用CSSH5 App开发常用样式排版样式——标题、情景文本颜色、情景背景色、文本对齐和元素对齐表单样式——基本样式、尺寸样式、水平排列的表单图片样式——响应式图片、图片形状卡片风格样式——列表、按钮组、面板排版样式——标题系统提供六种标题，即有利于记忆、风格统一，又有利于实现App的换肤。这六种标题是从h1到h6，h1是最大号的标题，h6是最小号的标题排版样式——情景文本颜色系统提供六种情景文本颜色，即有利于记忆、风格统一，又有利于实现App的换肤。这六种情景文本颜色分别是：柔和text-muted、首要text-primary、成功text-success、信息text-info、警告text-warning、危险text-danger排版样式——情景背景颜色系统提供五种情景背景颜色，即有利于记忆、风格统一，又有利于实现App的换肤。这五种情景背景颜色分别是：首要bg-primary、成功bg-success、信息bg-info、警告bg-warning、危险bg-danger排版样式——文本对齐和元素对齐文本有三种对齐方式，分别是左对齐text-left、右对齐text-right和居中对齐text-center对比文本，元素也有三种对齐方式，分别是向左浮动元素pull-left、向右浮动元素pull-right、内容块居中center-block表单样式基本样式form-control是input、textarea和select等表单组件的基础样式组件尺寸表单组件默认使用普通尺寸，可以通过增加input-lg样式设置为大尺寸，也可以通过增加input-sm样式设置为小尺寸水平排列的表单下图是一个水平排列的表单，表单中一共有四行，第一、二行各有两列，第三、四行各有一列图片样式响应式图片为图片添加.img-responsive样式，可以让图片在其父元素中更好的缩放图片形状为图片形状提供了三种样式，分别是圆角矩形图片img-rounded、圆形图片img-circle、圆角描边图片img-thumbnail卡片风格的列表卡片风格列表的表现形式是在两行之间显示一条浅灰色的分隔线，使列表中的每一行都成为一张卡片，右图就是卡片风格的列表给列表组件增加x-cards样式卡片风格的按钮组卡片风格按钮组的表现形式是整个按钮组呈现浅灰色的背景色，用醒目的颜色标出当前选中按钮，区别于其他按钮，右图就是卡片风格的按钮组给按钮组组件增加x-card样式卡片风格的面板卡片风格面板的表现形式是每个卡片的背景色都是白色，两个卡片之间用浅灰色分割条分开