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. owa_outlook暴力破解脚本

    其实msf里面存在这样的模块,search owa 即可,字典这种东西还是找规律密码去破解比较好 然后担心遇到渗透测试没有msf情况下,还是得自己写个脚本,网上找了一下lijiejie,但是运行不了, ...

  2. 从源码Build vim以及打包.deb

    How to build vim 1. Build步骤 git clone --depth https://github.com/vim/vim.git # download the source c ...

  3. Zeppelin 用jdbc连接hive报错

    日志: Could not establish connection to jdbc:hive2://192.168.0.51:10000: Required field 'serverProtoco ...

  4. RubyMine 2016.1 下载 附注册激活码 破解版方法

    注册破解方法: 在要求输入注册的界面选择激活码,然后粘贴以下注册码: 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIj ...

  5. ajax客户端请求与服务端响应浅谈

    AJAX,即Asynchronous Javascript And XML,AJAX本质是在HTTP协议的基础上以异步的方式与服务器进行通信. 所谓的异步,是指某段程序执行不会阻塞其他程序执行,其表现 ...

  6. 【转】判断URL是否能够访问

    import urllib2 def file_exists(url): request = urllib2.Request(url) request.get_method = lambda : 'H ...

  7. Attempt to write to field 'android.support.v4.app.FragmentManagerImpl android.support.v4.app.Fragment.mFragmentManager' on a null object reference

    E/AndroidRuntime﹕ FATAL EXCEPTION: mainProcess: org.example.magnusluca.drawertestapp, PID: 3624java. ...

  8. POJ 1118 Lining Up

    枚举,排序. 先将所有点按双关键字排序,然后枚举线的顶点$P$,剩余的点以$P$为中心进行极角排序,可以取个$gcd$,这样一样的点就排在一起了,然后统计一下更新答案. #pragma comment ...

  9. hdu1029

    #include<iostream>#include<string.h>using namespace std;int main(){ int n,i; int t; int ...

  10. ASP.NET中ListBox控件的使用

    文章来源:http://www.cnblogs.com/fengzheng126/archive/2012/04/10/2441551.html ListBox控件属性介绍: SelectIndex: ...