Bootstrap是基于HTML、CSS和JavaScript开源的前端开发工具包。

1、响应式布局:

效果:根据浏览器的宽度来调整页面布局。

例如：

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <style>

        @media(min-width:500px){   /*宽度小于500像素时,去掉bak样式*/

            .bak{

                background: red;

            }

        }

    </style>

    <div class="bak">

        hello world!

    </div>

</body>

</html>

2、伪类:

<body>

    <style>

        @media(min-width:500px){   /*宽度小于500像素时,去掉bak样式*/

            .bak{

                background: red;

            }

        }

        .add:after{

            content: 'ahaii'; /*在文本后面添加ahaii*/

        }

    </style>

    <div class="add">

        hello world!

    </div>

</body>

.before()用法一样。

.hover:after(): 当鼠标滑到标签上看，指定after()里面的样式。

Bootstrap使用:

http://v3.bootcss.com/

Bootstrap介绍的更多相关文章

  1. 第 1 章 Bootstrap 介绍

    学习要点:1.Bootstrap 概述2.Bootstrap 特点3.Bootstrap 结构4.创建第一个页面5.学习的各项准备 主讲教师:李炎恢 本节课我们主要了解一下 Boostrap 历史.特 ...

  2. [html5] 学习笔记-bootstrap介绍

    1.Bootstrap介绍 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 2.下面对于官网上给出的最简单的一个bootstra ...

  3. 第二百三十一节，Bootstrap 介绍

    Bootstrap 介绍 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boos ...

  4. 第1章 Bootstrap介绍

    学习网址:http://www.bootcss.com/ 下载网址:http://v3.bootcss.com/ 下载后一共三个文件夹 css js fonts 引入的文件 <link rel= ...

  5. Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏

    一.Bootstrap Bootstrap,来自 Twitter,是目前最受欢迎的前端框架. Python中,同样可以使用Bootstrap. 1. 导入Bootstrap库 from flask_b ...

  6. 前端基础之Bootstrap介绍

    bootstrap简介 http://v3.bootcss.com/ Bootstrap优点:  下载:  Bootstrap引入 <meta name="viewport" ...

  7. Bootstrap介绍以及配置

    一.Bootstrap概述: 1.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的一个用于快速开发 Web 应用程序和网站的前端框架. 2.用于开发响应式布局.移动设备优先的 W ...

  8. Bootstrap 轻量级后台管理系统模板--ACE使用介绍

    在上一篇基于Bootstrap介绍了一个免费的后台管理模板Charisma UI. 参见链接: 基于Jquery.Bootstrap的后台管理免费UI框架推荐--Charisma UI 今天继续分享一 ...

  9. Bootstrap 简介

    一.Bootstrap介绍 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.本课时讲解 Bootstrap 的概念,并介绍 Boo ...

随机推荐

  1. C#重写url

    string url = Request.Url.LocalPath; Context.RewritePath(url + "?id=1111&name=gdwy"); 或 ...

  2. C#深复制与浅复制

    C#深复制与浅复制 C#中对于数据的复制机制虽然简单但是容易让人误解.C#数据类型大体分为值类型(value type)与引用类型(reference type).对于值类型数据,复制的时候直接将数据 ...

  3. python代码随笔

    此篇随笔只是作为自己偶然想起的遇到过的代码片段..记录下! 1.巧用lambda,reduce实现多层嵌套的装饰器: 示例如下: #示例 函数chain([a,b,c,d) (input), 最终实现 ...

  4. js在关闭页面前弹出确认提示【转载】

    最近项目中出现个bug,就是导出数据后,会提示确认导航,其实实际需求并不需要这个提示,可能是之前遗留的问题.查了下资料是在触发了onbeforeunload事件,那么剩下的就是代码组织问题了. 众所周 ...

  5. OpenGL杂七杂八

    Projection Matrix 投影矩阵 3D -> 2D PFD_DOUBLEBUFFER 双缓冲 在图形图象处理编程过程中,双缓冲是一种基本的技术.我们知道,如果窗体在响应WM_PAIN ...

  6. awk学习笔记二：调用shell、文件执行（转）

    awk 'BEGIN {print "Hello"}' 不操作文件直接处理数据流 要调用shell则可以用管道命令 如,打印日期awk 'BEGIN {"date&quo ...

  7. kuangbin专题一 简单搜索

    弱菜做了好久23333333........ 传送门: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=105278#overview A ...

  8. Java 序列化 JDK序列化总结

    Java 序列化 JDK序列化总结 @author ixenos Java序列化是在JDK 1.1中引入的,是Java内核的重要特性之一.Java序列化API允许我们将一个对象转换为流,并通过网络发送 ...

  9. C++之指针例题解析

    看了挺长一段时间的C了,基本上是把基础语法过关了,偶然遇见一个C++的面试题,分析一下,作为一段时间的打卡. 代码在编译器里边打一下, #include <iostream> using ...

  10. linux kernel module

    #include <linux/init.h>#include <linux/module.h>#include <linux/kernel.h> static i ...