BootStrap【二、样式】
H5文档类型
由于使用了H5和CSS熟悉,需要在文件头引入
移动设备优先
为了对移动设备友好,需要使用标签viewport
width=device-width 宽度为设备宽度
height 高度
initial-scale=1 加载时以1:1呈现
user-scalable=no 关闭缩放(只能使用滚动)
maximum-scale=1
minimum-scale=1
响应式
img-responsive 响应式图形,即图像自动缩放以适应屏幕,用于img
@media screen and (max-width:900px){.class} 定义在style里,当屏幕最大宽度小于900px时,使用其中定义的.class,否则使用原有class
Demo
正常全屏显示
当拖动屏幕缩小时
全局显示
容器(Container)
使用(不可嵌套)
- 行必须放在.container 内
*样式
网格系统(Grid System)
屏幕会分为最多12列
预定义网格类 .row .col-xs-4(表示列在xs大小的屏幕上占4列,屏幕大小有xs-超小、sm-小【手机】、md-中【平板】、lg-大【台式】)
网格结构demo:
偏移
使用offset进行列偏移 如.col-sm-offset-3 .col-sm-6 即为6列居中显示(向右偏移3列,6列显示,后3列空白)嵌套列
Demo
列排序(PUSH PULL)
Demo(本来是从左到右123,push表示向右推,pull表示向左拉,与offset的区别是offset会导致后面的元素跟着偏移,push、pull会叠加显示)
排版
h1-h6(标题样式与默认不同,用于块元素)/.h1-.h6(内联元素)
.small(副标题,用于内联元素,父文本85%)
.lead(引导主题副本)
.strong(加粗)
.em(斜体)
.text-left/center/right (左/中/右对齐)
.text-lowercase/uppercase/capitalize(小写/大写/首字母大写)
.text-primary/success/info/warning/success(颜色:无色、绿色、蓝色、黄色、红色)
Demo
表格
.table-bordered 带边框
.table-striped 隔行变色
.table-hover 悬停变色
.table-condensed 紧凑风格
primary/success/info/warning/success(行背景颜色:无色、绿色、蓝色、黄色、红色)
Demo
代码
pre/.pre-scrollable 代码块独立显示/代码块滚动
kbd 按键提示
samp 电脑输出
code 内联代码片段
Demo
表单
三种表单布局:
- 垂直表单(默认)
- 内联表单 .form-inline
- 水平表单 .form-horizontal
role="form" 语义标签,给浏览器和搜索引擎看
.form-group div类,用于包含一组表单元素,控制最佳间距
.has-success/danger 表单组中的可控制元素改变为绿色、红色,用于div
.form-control input、textarea、select 样式控制
.btn 按钮样式,用于button
.btn-default 按钮默认样式,用于button
.btn-success/danger... 按钮颜色,绿色,红色,用于button
.btn-lg/sm 按钮大、小,用于button
.active 按钮为按下状态,用于button
.btn-block 按钮为父元素宽度,用于button
.disabled 按钮不可用,用于button
.sr-only 屏幕阅读器使用,screen reader only,供残障人士阅读使用,不显示,用于label
.control-label label标签样式,文本采用右对齐方式,用于label
.input-sm/lg input框变小、变大,用于input
.checkbox 用于div,包裹label和checkbox
.radio 用于div,包裹label和radio
Demo
图片
.img-rounded 圆角
.img-circle 圆形
.img-thumbnail 带有边框的圆角图形
Demo
BootStrap【二、样式】的更多相关文章
- yii使用bootstrap分页样式
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
- bootstrap 分页样式代码
bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...
- 手机自动化测试:appium源码分析之bootstrap二
手机自动化测试:appium源码分析之bootstrap二 在bootstrap项目中的io.appium.android.bootstrap.handler包中的类都是对应的指令类, priva ...
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- Bootstrap -- 按钮样式与使用
Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- 第二百三十二节,Bootstrap排版样式
Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一.页面排版 Boot ...
- 覆盖bootstrap的样式
覆盖bootstrap的样式,很简单.在css中加上 !important 来更改自己样式的执行优先级!
- bootstrap全局样式二
加form-grope是为了以后更好的管理,一组form写一个form-grope 显示如下: 并排显示的话,给用户名前面再加一个div,再加horizontal,如下,并且加上control-lab ...
随机推荐
- javaweb大文件上传
本文主要关于利用html表单上传文件的后台代码实现. 需要用到两个工具类Apache commons-fileupload和commons-io. 注意要校验是否选择文件上传,最开始写的时候没有加上校 ...
- 【error】 for i in range(len(shape)/2): TypeError: 'float' object cannot be interpreted as an integer
Q: for i in range(len(shape)/2):TypeError: 'float' object cannot be interpreted as an integer A: for ...
- 开发工具之GIT
GIT WORKFLOW this readme created on 2019.07.28 by Suarez7988 这是一遍介绍git版本控制流程的中文说明,必须通篇阅读一下 https://g ...
- PJzhang:钓鱼域名生成工具urlcrazy
猫宁!!! www.baidu.com和www.baibu.com是不是很相似,urlcrazy可以自动生成一大批. 这款工具的作者是Andrew Horton 工具下载地址: http://www. ...
- Arduino基础入门—3.连接 IIC 1602 LCD显示文字
1. IIC转接板介绍 Arduino Uno R3开发板的外部IO口是非常有限的.在驱动LCD1602时,尽管我们的数据线使用了4线,相对于8线方式减少一半,但是在需要外接多种传感器的应用中,4线驱 ...
- Python用摘要算法生成token及检验token
原创作者:希希大队长,blog:https://cnblogs.com/dongxixi/ # 基础版,不依赖环境 import time import base64 import hashlib c ...
- 日常工作问题解决:centos/linux系统如何检测端口是否打开
1.telnet命令 格式: telnet ip 端口号 [root@centos7-127 ~]# telnet 192.168.87.128 22 Trying 192.168.87.128... ...
- RxJava基本使用
更多文章请点击链接:http://77blogs.com/?p=162 转载请标明出处:https://www.cnblogs.com/tangZH/p/12088300.html,http://77 ...
- IDEA Java 源发行版 8 需要目标发行版 1.8
[问题记录] maven新建的一个项目,需要到一些java8的一些特性,但是在编译的时候就报错了,提示这样的错误. 我是在用二进制字面量出现的这个问题,二进制自变量是Java7的特性, 你可以这样写 ...
- IDEA插件之PMD
1.是什么? PMD 是一个开源静态源代码分析器,它报告在应用程序代码中发现的问题.PMD包含内置规则集,并支持编写自定义规则的功能.PMD不报告编译错误,因为它只能处理格式正确的源文件.PMD报告的 ...