发表于: 2018-11-09 22:29:40
1 732
今天完成的事情:今天开始做任务8,了解了bootstrap框架的基本结构,花了点时间把它的开发文档看了一下,包括其中一些比较常见的导航栏,基本布局有所了解
明天计划的事情:明天计划把任务8的第一个页面的基本内容写完,先把基本的布局结构定下来
遇到的问题:
1,首先遇到的第一个问题就是在菜鸟教程下载bootstrap的时候,下载下来的文档里面包含很多个文件,网上的用法的话基本都是引用的cdn,对于本地文件的提到很少,所以我查询了在本地要引用哪个文件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | bootstrap/ <!--主目录--> ├── css/ <!--CSS样式文件--> │ ├── bootstrap.css <!--Bootstrap核心CSS文件--> │ ├── bootstrap.css.map <!--source map文件--> │ ├── bootstrap.min.css <!--Bootstrap核心CSS文件 压缩版--> │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css <!--可选的Bootstrap主题文件(一般不用引入)--> │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css <!--可选的Bootstrap主题文件(一般不用引入) 压缩版--> │ └── bootstrap-theme.min.css.map ├── js/ <!--JavaScript文件--> │ ├── bootstrap.js <!--Bootstrap核心JavaScript文件--> │ └── bootstrap.min.js <!--Bootstrap核心JavaScript文件 压缩版--> └── fonts/ <!--字体图标--> ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 |
*bootstrap.min.css 是经过压缩后的 bootstrap 样式表,内容和 bootstrap.css 完全一样,但是把中间不必要的空格之类的东西都删掉了,所以文件大小会比 bootstrap.css 小,可以在部署网站的时候引用,如果引用了这个文件,就没必要引用 bootstrap.css 了,一般我们引用的话如下面所示
<!-- 新 Bootstrap 核心 CSS 文件 -->
<
link
rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<
link
rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
引用bootstrap.min.css就行
2,第二个问题就是刚接触这个的时候,对于里面的定义完全不是很了解,包括其定义的class各种东西完全不是很理解,后来网上查询了下,也向师兄请教了下,发现在使用bootstrap框架的时候,因为大部分所定义的属性其中的属性基本样式是已经设计好了,我们如果需要用到的话可以直接在class中引用其中所定义好的属性,所需要的话就是在class中声明一下就好了,用起来的话还是比较方便的,只是有一点需要注意的是要在写代码的时候要经常向
开发者文档查询其中的用法,因为好多的属性都是自己所不熟悉的,只能是自己使用的多一点习惯就好了
收获:基本对bootstrap有一个了解了,使用起来的还不是很顺手,因为所需要学习的东西很多,争取快速去熟练使用它。
评论