HTML模版组件

1、介绍

BootStrap （最好看的）
- css
- js
- [x] 学习 BootStrap 规则
jQueryUI （美观一般，偏后台。*）
- css
- js
- [x] 学习 jQueryUI 规则
EasyUI （html框架和生成的效果不一样，有时需要修改css、js，代价大一点）
- css
- js
- [x] 学习jQueryUI 规则

**总结：**jQueryUI和EasyUI 用在后台管理偏多，Bootstrap 后台主页显示都可以用。

可以直接用模板，不用重复造轮子。

2、BootStrap

响应式布局（响应式页面）

面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。比如网页随着窗口大小的变化而显示不同的样式。

BootStrap css里面存在大量的响应式布局。

<head>

    <style>

        .c1{

            background-color: red;

            height: 50px;

        }

        @media (min-width: 900px){

            .c2{

                background-color: grey;

            }

        }

    </style>

</head>

<body>

    <div class="c1 c2"></div>

</body>

图标、字体 @font-face

BootStrap 里面有图标，但是没有图片，里面的图标是基于字体做的。

在 dist/fonts/ 目录里面。每个图标都有绑定的位置。比如 ”content: “\2212”“

使用的时候直接写上图标样式就可以了。

基本使用

修改BootStrap里面的样式时，注意样式有优先级的，下面的生效。更方便的，设置为最优先，最重要的。

.no-radius{

    border-radius: 0 !important;    /*优先级最高，最重要的*/

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap.css">

    <link rel="stylesheet" href="bootstrap-3.3.0-dist/dist/css/bootstrap-theme.css">

    <style>

        .no-radius{

            border-radius: 0 !important;    /*优先级最高，最重要的*/

        }

    </style>

</head>

<body>

    <span class="glyphicon glyphicon-plus-sign"></span>

    <script src="jquery-1.12.4.js"></script>

    <script src="bootstrap-3.3.0-dist/dist/js/bootstrap.js"></script>

</body>

</html>

3、插件实现轮播图（bxSlider）

bxslider.com 下载插件，网站上有使用教程。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="jquery.bxslider/jquery.bxslider.css">

</head>

<body>

    <ul class="bxslider">

        <li><img src="data:images/1.jpg" /></li>

        <li><img src="data:images/2.jpg" /></li>

        <li><img src="data:images/3.jpg" /></li>

        <li><img src="data:images/4.jpg" /></li>

    </ul>

    <script src="jquery-1.12.4.js"></script>

    <script src="jquery.bxslider/jquery.bxslider.js"></script>

    <script>

        $(document).ready(function(){

            $('.bxslider').bxSlider();

        });

    </script>

</body>

</html>

巴特西

HTML模版组件

1、介绍

2、BootStrap

3、插件实现轮播图（bxSlider）

最新文章

热门文章