Web之三个插件

一、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>

二、EasyUI

三、JqueryUI

posted @ 2022-02-18 17:35  中國颜值的半壁江山  阅读(19)  评论(0)    收藏  举报