码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap&bxslider

时间:2017-05-26 16:01:16      阅读:352      评论:0      收藏:0      [点我收藏+]

标签:style   theme   set   响应   基本   check   使用   link   off   

Bootstrap

规则

一、响应式布局

  @media

二、图标、字体

  @font-face

三、基本使用

实例:

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

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

</head>
<body>

    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active">
        <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
      </label>
      <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> Checkbox 2
      </label>
      <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> Checkbox 3
      </label>
    </div>

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

</body>
</html>

bxslider(轮播图)

实例:

<!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="images/pic1.jpg" /></li>
      <li><img src="images/pic2.jpg" /></li>
      <li><img src="images/pic3.jpg" /></li>
      <li><img src="images/pic4.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>

 

Bootstrap&bxslider

标签:style   theme   set   响应   基本   check   使用   link   off   

原文地址:http://www.cnblogs.com/xone/p/6908678.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!