day17-BootStrap重点介绍和轮滑图
一、前言
之前我们隆重的介绍了EasyUI和jqueryUi,他们只适合做后台管理,今天我们来讲的bootstrap 它既适合做前台,也时候做后台,而且动画效果是最好的。所以我们今天重点的来研究一下它是怎么用的。bootstarp中文官网:http://www.bootcss.com/
二、下载bootstarp
2.1、下载步骤
①选择某个bootstrap的版本,这边我们选用版本3
②下载bootstarp
③选择下载用于生产的bootstarp
2.2、bootstrap的使用
把下载下来的bootstrap文件解压,复制到pycharm中,然后自定义的html中引入样式bootstrap.css、bootstrap-theme.css(加了简单的颜色配比),引入的js:bootstrap.js,bootstrap的js依赖jquery,所以还要引入jquery。
三、 响应式布局
3.1、@media
说明:当屏幕的宽度超过自己设置的最小宽度,则使用@media中的样式,否则用其他样式。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: black; } @media (min-width: 700px) { .c2{ background-color: grey; } } </style> </head> <body> <div class="c1 c2">dw</div> </body>
所以:屏幕的宽度最小是700px,如果大于700px的时候 .c2的样式生效,小于700px,则.c2不生效。
bootstrap中的使用,这个知道就行了:
四、图标和字体
4.1、@font-face
bootstrap里面提供了大量的图标和字体,这个是表示一个一个小格,每个小格里面给你写好了样式,然后用某个标记表示一下就可以用了。
工作中如何使用呢?
①在bootsrtap中找到组件
②查看页面元素,找到你想要的图标
③赋值这段标签代码,粘贴到你的pycharm中
五、bootstrap的基本使用
5.1、引用bootstrap的组件
5.2、复制粘贴到我的pycharm中,然后进行修改
这边注意了,如果我的style写在link的上面,因为html文本是从上到下解释,所以优先级高的是下面的,那么我们自定义的就会被覆盖掉,除非加一个important字样,表明优先级最高。
五、轮滑图
这个轮滑图我们经常使用到,我们有这样的组件bxslider,这个里面专门给我们提供了轮滑图的组件。bxslider官网地址:https://bxslider.com/
5.1、下载
5.2、导入使用