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. websocket介绍 以及 vue websocket使用案例

    1 介绍: https://www.zhihu.com/question/20215561 2 案例: https://www.jianshu.com/p/0d20a032d0ec (坑说明). ht ...

  2. Docker第一个应用：Hello World

    Docker应用:Hello World 前言: 最近学习了Docker相关技术点,国内关于Docker的资料大多是基于Linux系统的,但是我对Linux又不熟(实际上没用过,掩面哭笑.Jpg). ...

  3. QuickSort（Java）

    private void quickSort(int[] input, int start, int end) { if (start >= end) return; int index = p ...

  4. review

    一.123 第二部分:面向对象 . 谈谈你对面向对象的认识. . 约束 Java: - 接口,约子类中必须包含某个方法(约束). Interface IMessage: def func1(self) ...

  5. php基础-4

    require和include require和include都是导入外部php文件的方法,使用方法为require和include关键字后接导入包(php_file)的名字的字符串形式. 当导入的包 ...

  6. LG4213 【【模板】杜教筛（Sum）】

    sum\(\mu\)求法 设 \[S(n)=\sum_{i=1}^n \mu(i)\] 回顾公式 \[\sum_{d|n}\mu(d)=[n=1]\] 对\(n\)求和 \[\sum_{i=1}^n\ ...

  7. itcast-Hibernate orm元数据和 关系操作

    在Hibernate安装包 project /etc/hibernate.property文件下 显示 ,格式化       映射导入映射文件 详解orm元数据 配置文件详解 generator主键生 ...

  8. hermes kafka 转http rest api 的broker 工具

    hermes 与nakadi 是类似的工具,但是设计模型有很大的差异,hermes 使用的是webhook的模式(push) nakadi 使用的是pull(event stream),各有自己解决的 ...

  9. mysql之 redo log

    重做日志(redo log) 前言:之前一直弄不清楚 mysql 里面 bin log 和 innodb log 文件的区别,在脑子里面一直有个疑问 binlog 日志文件已经可以用来进行数据库的日志 ...

  10. java 泛型与通配符（？）

    泛型应用于泛型类或泛型方法的声明. 如类GenericTest public class GenericTest<T> { private T item; public void set( ...