Web之三个插件

最新推荐文章于 2025-02-28 00:15:00 发布

中國颜值的半壁江山

最新推荐文章于 2025-02-28 00:15:00 发布

阅读量167

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/a17853481576/article/details/109315997

版权

前端专栏收录该内容

7 篇文章

订阅专栏

一、BootStrap

1、响应式

 当最小宽度是768px时(>=768px),下面生效,小于768px时，就不生效了
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

2、图标、字体

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon-asterisk:before {
  content: "\002a";
}

3、基本使用

引用别人的插件,想让自己定义的样式生效,后面加上 !important
.no-radus{
    border-radius: 0 !important;
}

小例子、轮播插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="bxslider-4-4.2.12/dist/jquery.bxslider.css">
</head>
<body>
    <ul class="bxslider">
        <li><img src="pictuers/1.jpg"/></li>
        <li><img src="pictuers/2.jpg"/></li>
        <li><img src="pictuers/3.jpg"/></li>
        <li><img src="pictuers/4.jpg"/></li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script src="bxslider-4-4.2.12/dist/jquery.bxslider.js"></script>
    <script>
        $(function () {
            $('.bxslider').bxSlider();
        });
    </script>

</body>
</html>