BootStrap_02之全局样式及组件
1、BootStrap指定的四种屏幕尺寸:
①超大PC屏幕——lg(large):w>=1200px;
②中等PC屏幕——md(medium):1200px>w>=992px;
③Pad屏幕——sm(small):992px>w>=768px;
④Phone屏幕——xs(extra small):768px>w;
2、BootStrap中的两种容器:
①定宽容器:.container——1170px(lg)、970px(md)、750px(sm)、100%(xs);
②变宽容器:.container——100%;
③两种容器都有:before和:after,可以清除子元素的margin和float造成的影响;
3、全局CSS样式——表格:
.table——基础表格;
.table-bordered——带边框的表格;
.table-striped——隔行变色的表格;
.table-hover——带鼠标悬停效果的表格;
.table-responsive——响应式表格,必须使用在table的父元素div上;
4、全局CSS样式——栅格布局系统:
①最外层必须是容器类:.container或.container-fluid;
②容器中放置行:.row;
③行中放置列:.col;
④针对不同的屏幕使用不同的列:
.col-lg-*:适用于超大PC屏幕;
.col-md-*:适用于中等PC屏幕;
.col-sm-*:适用于Pad屏幕;
.col-xs-*:适用于Phone屏幕;
一个div可以同时声明多个不同屏幕下的列宽:
<div class="col-lg-* col-md-* col-sm-* col-xs-*">
⑤一行均分为12份,每个列都需要指定自己所占的份数:
<div class="col-lg-2 col-md-6 col-sm-8 col-xs-12">
⑥每个列都可以指定向右的偏移量:,可以实现右错位的效果:
<div class=".col-lg/md/sm/xs-offset-1/2/3/4/...">
⑦不同的列在不同的屏幕下有不同的适用性:
.col-lg-*:只适用于LG屏幕;
.col-md-*:适用于MD/LG屏幕;
.col-sm-*:适用于SM/MD/LG屏幕;
.col-xs-*:适用于XS/SM/MD/LG屏幕;
列的偏移适用同样的规则,对当前屏幕以及更大屏幕有效;
⑧可以指定某列在特定尺寸的屏幕下隐藏:
.hidden-lg/md/sm/xs;
隐藏只对当前指定的屏幕有效;
⑨栅格系统可以嵌套:
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"></div>
</div>
</div>
</div>
</div>
5、全局CSS样式——表单:
①HTML5标准对表单相关的推荐写法:
button必须指定type;
输入组件必须有对应的label——为无障碍阅读准备:
<label for="xx">example</label>
<input id="xx">
<label>
<input type="radio/checkbox">example
</label>
②BootStrap提供的默认表单:
<form>
<div class="form-group">
<label></label>
<input class="form-control">
<span class="help-block"></span>
</div>
</form>
③BootStrap提供的行内表单:
<form class="form-inline">
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control">
</div>
</form>
④BootStrap提供的水平表单:
<form class="form-horizontal">
<div class="form-group">
<div class="col-*-*">
<label class="control-label"></label>
</div>
<div class="col-*-*">
<label class="form-control"></label>
</div>
</div>
</form>
6、BootStrap组件——图标字体:
①图标字体是字体,可以无限缩放、修改文本颜色、背景颜色、阴影...,显示的内容却是图形图标;
②图标字体在Web项目中都是作为服务器端字体来使用——当客户端访问页面时,即时从服务器下载必须的图标字体:
@font-face{
font-family:"Glyphicons Halflings";
src:url("../fonts/glyphicons-halflings-regular.eot");
}
.glyphicon{
position:relative;
top:1px;
display:inline-block;
font-family:"Glyphicons Halflings";
}
③使用:
<span class="glyphicon glyphicon-*"></span>
* span中不能含有任何文本或子标签;
BootStrap_02之全局样式及组件的更多相关文章
- taro 组件的外部样式和全局样式
自定义组件对应的样式文件,只对该组件内的节点生效. 编写组件样式时,需要注意以下几点: 组件和引用组件的页面不能使用 id 选择器(#a).属性选择器([a])和标签名选择器,请改用 class 选择 ...
- 关于微信小程序中组件和页面对全局样式的继承性
1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- styled-components解决全局样式'injectGlobal' 废除的问题
最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ...
- 推荐 9 个样式化组件的 React UI 库
简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...
- vue文件引入全局样式导致样式重复
通常项目中src下的子目录都会有一个style文件夹,专门用来存放全局的样式文件. 这个style文件夹下,一般有reset.css.var.scss.mixin.scss.class.scss.in ...
- bootstrap复习:全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
- [PHP]全局使用 Composer 组件的思路
/** * 全局使用 composer 组件的步骤: * * 1. 建一个包含所有需要全局使用的composer包的项目. * 如:globalVendor/ * composer init 初始化 ...
- bootstrap 全局样式设置
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
随机推荐
- 01.SQLServer性能优化之----强大的文件组----分盘存储
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...
- 操作系统篇-调用门与特权级(CPL、DPL和RPL)
|| 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.前言 在前两篇文章(<操作系统篇-浅谈实模式与保护模式>和<操作系统篇-分段机制与GDT|LDT>)中,我们提到 ...
- 超大 Cookie 拒绝服务攻击
有没有想过,如果网站的 Cookie 特别多特别大,会发生什么情况? 不多说,马上来试验一下: for (i = 0; i < 20; i++) document.cookie = i + '= ...
- SQL Server常见数据类型介绍
数据表是由多个列组成,创建表时必须明确每个列的数据类型,以下列举SQL Server常见数据类型的使用规则,方便查阅. 1.整数类型 int 存储范围是-2,147,483,648到2,147,483 ...
- 利用Node.js的Net模块实现一个命令行多人聊天室
1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类:Server和Socket类.工厂方法. Server类 ...
- IE8/9 本地预览上传图片
本地预览的意思是,在选择图片之后先不上传到服务器,而是由一个<img>标签来预览本地的图片,非 IE8/9 浏览器可以从<input type="file"/&g ...
- iOS架构一个中型普通App的一些经验总结
这一版比较完善的的App终于提交审核了.有时间写写自己的一些经验的总结了.自己主导的从0到比较成型的app到目前来说也只有两个,但是其中的很多东西都是大同小异.基本上是想到了什么就写什么,感觉写的不到 ...
- 记录一次bug解决过程:数据迁移
一 总结 不擅长语言表达,勤于沟通,多锻炼 调试MyBatis中SQL语法:foreach 问题:缺少关键字VALUES.很遗憾:它的错误报的让人找不着北. 二 BUG描述:MyBatis中批量插入数 ...
- Mysql基础代码(不断完善中)
Mysql基础代码,不断完善中~ /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限 ...
- WEB安全隐患
org.apache.commons.lang.StringEscapeUtils 进行输入框内容处理 [StringEscapeUtils.escapeSql(str);StringEscapeUt ...