BootStrap中常用样式类
网格选项
row:行
col--:列(第一个可以为xs[超小]/sm[小型]/md[中型]/lg[大型];第二个必须为12以内的【列数】)
col--offset-:列偏移(第一个同上,第二个范围为1~11,表示把该列的左外边距(margin-left)增加列)
col---:列排序(第一个同上,第二个可以为push[向右]/pull[向左],第三个范围是1~11【列数】)
排版
small:内联子标题
lead:引导主体副本
text-:文本样式(可以为left[左对齐]/center[居中对齐]/right[右对齐]/muted[减弱文本]
/primary/success/info/warning/danger
/justify[自动换行]/nowrap[不换行]
/lowercase[小写]/uppercase[大写]/capitalize[首字母大写]
)
list-inline:列表置于同一行
表格
table:基本样式,只有横向分割线
table-:表格样式(*可以为triped[添加条纹]/bordered[添加边框]/hover[启用悬停]/condensed[更加紧凑])
tr/th/td:由active/success/info/warning/danger来改变背景颜色
table-responsive:将任意table放在table-responsive内,实现响应式表格
表单
创建基本表单(垂直表单)的步骤
向父元素添加role="form";
把标签和控件放在一个带有class .form-group的
向所有的文本元素、和添加.form-control.
创建水平表单的步骤
向父元素添加class .form-horizontal;
把标签和控件放在一个带有class .form-group的
向标签添加class .control-label
常用的表单控件主要有:
input:声明type有text
按钮
图片
辅助类
字体图标
下拉菜单
按钮组
输入框组
导航元素
导航栏
面包屑导航
分页
标签
徽章
超大屏幕
页面标题
缩略图
警告
进度条
多媒体对象
列表组
面板
BootStrap中常用样式类的更多相关文章
- bootstrap课程3 bootstrap中常用的排版样式有哪些
bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...
- java中常用的包、类、以及包中常用的类、方法、属性----sql和text\swing
java中常用的包.类.以及包中常用的类.方法.属性 常用的包 java.io.*; java.util.*; java.lang.*; java.sql.*; java.text.*; java.a ...
- bootstrap中的.container类定义
bootstrap中的.container类定义 .container{ padding-right:15px; padding-left:15px; margin-right:auto; margi ...
- java 中常用的类
java 中常用的类 Math Math 类,包含用于执行基本数学运算的方法 常用API 取整 l static double abs(double a) 获取double 的绝对值 l sta ...
- 简单了解Spring中常用工具类_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 文件资源操作 Spring 定义了一个 org.springframework.core.io.Resource 接口, ...
- JDBC中常用的类和接口
<零基础学Java> JDBC中常用的类和接口 利用JDBC的这些类和接口可以更方便地访问并处理存储在数据库中的数据. DriverManager类 DriverManager类 是JDB ...
- [原创]Android系统中常用JAVA类源码浅析之HashMap
由于是浅析,所以我只分析常用的接口,注意是Android系统中的JAVA类,可能和JDK的源码有区别. 首先从构造函数开始, /** * Min capacity (other than zero) ...
- Java基础__Java中常用数学类Math那些事
测试 package Cynical_Gary; public class Cynical_Text { public static void main(String[] args){ System ...
- Spark中常用工具类Utils的简明介绍
<深入理解Spark:核心思想与源码分析>一书前言的内容请看链接<深入理解SPARK:核心思想与源码分析>一书正式出版上市 <深入理解Spark:核心思想与源码分析> ...
随机推荐
- 性能测试工具LoadRunner32-LR之windows性能监控Perfmon
Perfmon是啥? Perfmon提供了图表化的系统性能实时监视器.性能日志和警报管理,可以用于监视CPU使用率.内存使用率.硬盘读写速度.网络速度等 性能分析方法 内存分析方法 内存分析用于判断系 ...
- 性能测试工具LoadRunner05-LR之Virtual User Generator html模式与url模式
“HTML-based script”说明 在默认情况下,选择“HTML-based script”,说明脚本中采用HTML页面的形式来表示,这种方式的脚本容易维护,容易理解,推荐这种方式录制 “UR ...
- 配置matcaffe 遇到的两个坑
1. 问题 (1) Invalid MEX-file '/root/caffe/matlab/+caffe/private/caffe_.mexa64': /matlab/r2016a/bin/gln ...
- Murano Weekly Meeting 2016.06.28
Meeting time: 2016.June.28 1:00~2:00 Chairperson: Kirill Zaitsev, from Mirantis Meeting summary: 1. ...
- git分支合并冲突
合并冲突 如果你在两个不同的分支中,对同一个文件的同一个部分进行了不同的修改,Git 就没法干净的合并它们. 如果你对 #53 问题的修改和有关 hotfix 的修改都涉及到同一个文件的同一处,在合并 ...
- Net-SNMP(V3协议)安装配置笔记(CentOS 5.2)(转)
原出处:http://blog.ihipop.info/2010/03/722.html 为了这颗仙人掌(cacti),我必须先部署(Net-SNMP), 同时我为了安全因素,也为了简便考虑,决定采用 ...
- vue2.0高仿饿了么better-scroll
首先安装better-scroll npm i better-scroll -S goods页面模板 <template> <div class="goods"& ...
- http缓存基本介绍
https://www.helloweba.com/view-blog-414.html
- Node.js-ReferenceError: _filename is not defined
简直不要被坑得太惨!!!你能?看出来这前面是两根下划线!两根下划线!两根下划线!太尴尬了~找了半天原因居然是这个!
- Canvas 中drawImage 绘制不出图片
在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...