发表于: 2020-04-26 23:52:48

1 1435


今天完成的事情

bootstrap的初步认识

bootstrap是最受欢迎的HTML\CSS\JS的框架,用于开发响应式布局、移动设备优先的web项目。

有编译并压缩后的css、Javascript和字体文件

bootstrap源码  sass等

现在用着编译压缩好的就够用了

如果不想下载也可以直接用网上的提供的CDN地址(只要有网络就可以用)

bootstrap的所有javascript插件都依赖jQuery,因此jQuery 必须在 Bootstrap 之前引入

如果只是仅仅需要样式就引用bootstrap.min.css这个文件就够了

JS引用要放在最下面 不然会加载失败

布局容器

.container 类 :用于固定宽度并支持响应式布局的容器

例子:

 用于100%宽度

栅格系统

随着屏幕或者视口尺寸增加,系统会自动分为最多12列(12份)

一行(row)分成12等份分或者12列(column)

第一行是分成12列 每列是1等份(1/12)

第二行是分成2列 每列是6等份 (6/12 也就是1/2)

第三行分3列 每列是4 (4/12)

以此类推.

如果一行超过12分 那就会另起新的一行排列

col-xs-*(*为12以内的数,即是一行里12分你要占几份)

col即column 

xs是小屏幕 即手机

sm是平板

md是桌面显示器

lg是大桌面显示器

col-md-6 意思就是我要在普通显示器里的一行我要占6份

col-sm-* 意思就是我要在平板里的一行我要占*份

以此类推...

叠堆的意思就像这样

 我用的是md 上图是988像素就开始叠起来了

993像素就不叠了  

今天就先练习到这里

明天的计划:

熟悉下bootstrap 开始做task6

收获

熟悉了容器类 还有栅格系统



返回列表 返回列表
评论

    分享到