博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
2019-06-11 Java学习日记之Bootstrap
阅读量:6535 次
发布时间:2019-06-24

本文共 902 字,大约阅读时间需要 3 分钟。

什么是响应式页面?

适应不同的分辨率显示不同的样式,提高用户的体验

BootStrap结构:

  全局CSS

    boosStrap中已经定义好了一套CSS的样式表

  组件

    bootStrap定义的一套按钮,导航条等组件

  JS插件

    bootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果

BootStrap的布局容器:

.container 类用于固定官渡并支持响应式布局的容器

.container-fluid  类用于 100% 宽度,占据全部视口(viewport)的容器。

校验表单扩展:

trigger  :  触发浏览器默认行为

triggerHandler  :  不会触发

is  :  判断

find  :  查找

BootStrap栅格系统的工作原理:

行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列(aligment)和内部(padding)

通过行(row)在水平方向创建一组列(column)

你的内容应当放置于列(column)内,并且只有列(column)可以作为行(row)的直接子元素

类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局

BootStrap源码中定义的mixin也可以用来创建语义化的布局

通过为列(column)设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding

BootStrap的栅格系统:

响应式设计:这种设计依赖于CSS3中的媒体查询

栅格样式:

设备分辨率大于1200使用lg样式

设备分辨率大于992 < 1200 使用md样式

设备分辨率大于768< 992使用sm样式

设备分辨率小于768使用xs样式

 

转载于:https://www.cnblogs.com/clqbolg/p/11006021.html

你可能感兴趣的文章
图解openssl实现私有CA
查看>>
BZOJ2213 : [Poi2011]Difference
查看>>
c++ Constructor FAQ 继续
查看>>
事务之六:spring 嵌套事务
查看>>
C#:路径
查看>>
iOS图片加载速度极限优化—FastImageCache解析
查看>>
PHP中的一些新特性
查看>>
I.MX6 Android mmm convenient to use
查看>>
[CareerCup] 13.9 Aligned Malloc and Free Function 写一对申请和释放内存函数
查看>>
Stack and Heap 堆和栈的区别
查看>>
什么是 A 轮融资?有 B轮 C轮么?
查看>>
55、Android网络图片 加载缓存处理库的使用
查看>>
svn文件提交时强制写注释
查看>>
【转载】千万级规模高性能、高并发的网络架构经验分享
查看>>
OC基础--OC中的类方法和对象方法
查看>>
ubuntu samba服务器多用户配置【转】
查看>>
母线的种类与作用是什么(转)
查看>>
【Xamarin 挖墙脚系列:IOS 开发界面的3种方式】
查看>>
Atitit.工作流系统的本质是dsl 图形化的dsl 4gl
查看>>
I.MX6 Android USB Touch eGTouchA.ini文件存放
查看>>