一、前言
之前我们隆重的介绍了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、导入使用
657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
