Bootstrap自学系列部分
来源:互联网 发布:苹果手机官方软件 编辑:程序博客网 时间:2024/06/05 15:58
注:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
Bootstrap 教程
什么是 Bootstrap?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
特点:
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
Bootstrap CSS
移动设备优先是 Bootstrap 3 的最显著的变化
响应式图像
图像对响应式布局的支持更友好。
全局显示、排版和链接
body {margin: 0;} 来移除 body 的边距
避免跨浏览器的不一致
Bootstrap 使用 Normalize 来建立跨浏览器的一致性。
Bootstrap 网格系统(Grid System)
一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
网格系统通过一系列包含内容的行和列来创建页面布局。
* 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
* 使用行来创建列的水平组。
* 内容应该放置在列内,且唯有列可以是行的直接子元素。
* 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
* 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
* 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。
媒体查询
/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { … }
/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) { … }
/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) { … }
通常:
@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }
Bootstrap 网格系统实例:堆叠的水平
我们使用 2 个 div,并在视口宽度的中间对它们进行 50%/50% 分割
您可以尝试一下,但要确保总和总是 12。
注:
inset 0 0 10px #000000含义如下
1. inset: 内投影
2. 水平方向偏移量
3. 垂直方向偏移量
4. 模糊半径值
Bootstrap 网格系统实例:中型和大型设备
在大型设备上,您最后设计成 33%/66%。所以我们要做的是准备好在断点处更改列的宽度
Bootstrap 网格系统实例:手机、平板电脑、台式电脑
Bootstrap 排版
我是标题1 h1. 我是副标题1 h1
- Bootstrap自学系列部分
- iBokan_ios80_自学系列_1(部分循环结构)
- 课本自学部分1
- 自学BootStrap(第一季)
- Bootstrap 部分类名
- jQuery 自学系列(1)
- 自学系列1
- 自学perl 系列1
- 自学DeepLearning系列
- Lambda表达式 《自学系列》
- Bootstrap迁移系列 - Modal
- Bootstrap迁移系列 - Navbar
- Bootstrap系列1
- Bootstrap系列2
- bootstrap收集系列
- Bootstrap系列一
- Bootstrap系列二
- bootstrap table系列:
- Velocity简明教程
- IAR无法打印浮点的解决方法
- HashMap
- 合并两个数组,新数组第k小的元素---二分--九度OJ1534
- URL中特殊字符的含义
- Bootstrap自学系列部分
- Android样式的开发:selector篇
- java中线程安全单例模式
- Delphi7安装ehlib卸载以及安装问 not a design time package.解决办法
- Android LinearLayout
- Android样式的开发:layer-list篇
- MySQL导出、删除索引Index和约束的方法
- Unity_使用Sprite Packer做图集_077
- 【模板】线段树区间最值