发表于： 2019-06-07 22:16:02
1 815
今天完成了什么：
完成小课堂ppt上传至github以及腾讯视频。
了解bootstrap框架，
遇到了什么问题：
上传ppt至github一开始不会，后来师兄说先同步github把修真院的资料先同步下来，然后把自己的同步到自己账户里，上传自己的代码，然后再申请向上面申请同步。
bootstrap框架还是很懵吧，暂时知道是几列的意思，具体的开始敲任务才知道怎么用吧。
今天收获了什么：
学习bootstrp:
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机,
所有的主流浏览器都支持 Bootstrap。
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
bootstrap栅栏系统css中的col-xs-*,col-sm-*,col-md-* 的意义：
.col-xs-*超小屏幕手机(768px),
.col-sm-*小屏幕平板(≥768px),
.col-md-*中等屏幕桌面显示器
在<head>里面添加css全局样式：
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
然后是在<body>闭合标签上面添加js
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
上文中是新版本4.所以当我们下载到本地时候要注意引用的路径
新版本4的框架添加了超小的屏幕，例如苹果4s等
虽然Bootstrap使用ems或rems来定义大多数大小，但pxs用于网格断点和容器宽度。这是为视口宽度以像素为单位，并且不随字体大小而变化。
主要有设备有：
.col- 即<576px分辨率的超小設備；
.col-sm- 指的是≥576px分辨率的小设备
.col-md- 指的是＞768px分辨率的中等设备
.col-lg -指的是≥992px分辨率的大設備
.col-xl-s指的是≥1200px分辨率的超大顯示設備。
不管在哪种屏幕上，栅格系统都会自动的每行row分12列 col-lg-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。
例如 <div class="col-6 col-md-3"> 这个div在屏幕中占的位置是：
.col-6 在超小屏幕中占6列也就是屏幕的一半（12/6列=2个div） ，
.col-md-3 在中等屏幕中占3列也就是1/4（12/3列=4个div）。
明天计划完成什么：
继续写任务8。
返回列表
评论