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="data:images/pic1.jpg" /></li>

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

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

      <li><img src="data: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的更多相关文章

  1. jquery使用案例

    表单验证 Dom实现表单验证 通过在form标签的submit上绑定一个onclick事件,用户点击事,触发这个事件,执行Checkvalid()函数进行对表单中的元素值验证,验证通过之后,继续让su ...

  2. HTML、CSS和JS

    一.html 1.web流程中的HTML HTML---->赤裸裸的人 CSS  ---->穿华丽的衣服 JS    ---->让人动起来 浏览器和server端之间的通信本质上是字 ...

  3. 第五篇、css补充二

    一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框 补充知识: line-height ...

  4. web 前端2 html css一些小问题技巧

    html css一些小问题技巧 1 对于儿子块float后,父亲块如果没内容就不见了,如何让父亲块依然跟随飘起了的儿子块撑起来呢?? 用到的属性after方法  公共方法作为继承即可. 1.1  方法 ...

  5. 【html、CSS、javascript-5】css应用场景补充

    一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...

  6. python_way day17 html-day3 前端插件（fontawsome，easyui，bootstrap，jqueryui，bxslider，jquerylazyload），web框架

    python_way day17 一.模板插件 图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1. ...

  7. BootStrap、jQuery UI、bxSlider组件使用

    组件的使用 首先需要将组件下载下来放在统同级目录下 导入组件 使用组件 BootStrap 示例: <!DOCTYPE html> <html lang="en" ...

  8. 【html、CSS、javascript-13】前端框架Bootstrap

    1.Bootstrap前端框架:包含css样式.js插件.图标等 http://www.bootcss.com/ 2.Font Awesome:非常全的图标大全 https://fontawesome ...

  9. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

随机推荐

  1. AE旋转

    精准对位: 好几个图层上的旋转点在一个位置上: 方法1:勾选网格,定点. 方法2:按住ctrl+r  调出尺寸.拖参考线,焦点自动吸附功能. 选中四张或者选中第一张,按shift键,选中最后一张(即可 ...

  2. hdu 1280 堆排序

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s) ...

  3. django JsonResponse和HttpResponse的在后端和前端区别

    JsonResponse和HttpResponse的区别 1.from django.http import JsonResponse return JsonResponse('例子') 2.impo ...

  4. ODOO区分测试库和正式库的简单方法

    ODOO区分测试库和正式库的简单方法.1. 打开 开发者模式,右上角能显示数据库名称,缺点是,太耗系统资源了,数据多的时候就明显感觉慢了.2. 安装社区的显示测试帐套的模块, 若是正式环境还是尽量少装 ...

  5. EnableAutoConfiguration注解的工作原理（org.springframework.boot.autoconfigure.EnableAutoConfiguration=core.bean.MyConfig）

    EnableAutoConfiguration注解的工作原理(org.springframework.boot.autoconfigure.EnableAutoConfiguration=core.b ...

  6. 【BZOJ3240】【UOJ#124】【NOI2013】矩阵游戏

    终于看懂一道题QAQ然而NOI都是这种难度题怎么玩QAQ 原题: 婷婷是个喜欢矩阵的小朋友,有一天她想用电脑生成一个巨大的n行m列的矩阵(你不用担心她如何存储).她生成的这个矩阵满足一个神奇的性质:若 ...

  7. DevExpress 中 设置 labelControl 的背景透明到图片的方法

    labelControl 中的 backColor 可以设置为: TransParent 当设置为: Transparent 的时候,labelControl 的背景依然为 主form的背景颜色 ,研 ...

  8. Linux下安装jdk&Jmeter

    一.在Linux上部署一个jdk以及Jmeter   tips1:Linux安装tar.gz文件到路径 tar -zxvf 软件包名.tar.gz -C 路径 比如我的jdk-8u131-linux- ...

  9. 对某个区间操作(sort,stable_sort,parital_sort,parital_sort_copy,nth_element,is_sorted)

    sort //版本一 template <class RandomAccessIterator> void sort(RandomAccessIterator first,RandomAc ...

  10. 如何让你的 KiCad 在缩放时不眩晕？

    如何让你的 KiCad 在缩放时不眩晕? 使用 KiCAD 第一感觉是打开速度非常快,而且 PCB 拉线也非常快,封装库又多. 但有一个问题,缩放时总给人一种眩晕,原来是因为鼠标自动跑到屏幕中间去了, ...