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. mysql数据库主从搭建

    一.最近一直在学习mysql的东西,刚好看到mysql如何搭建主从数据库,搜集了很多资料后大致了解了mysql主从复置的原理.以下是我的理解: 举例master为主数据库,slave为从数据库. sl ...

  2. ios微信支付成功后点击左上角返回不走回调的问题

    最近做微信支付发现ios9以后出现的跳转其他app后左上角有返回xxx功能会影响微信支付回调,情况如图 返回后不走下面的方法 - (BOOL)application:(UIApplication *) ...

  3. Html5移动端页面自适应百分比布局

    按百分比布局,精度肯定不会有rem精确 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  4. Java泛型的定义以及对于<? extends T>和<? super T>

    Java 中对于泛型方法的定义: public <T> T getT(){ .....相关代码; } 其中我对<T>的理解就是申明只是一个泛型方法的标记,T是返回的类型. 对于 ...

  5. WPF中TextBox的PreviewMouseLeftButtonUp事件

    当使用TextBox的PreviewMouseLeftButtonUp事件时(例如,鼠标点击进入TextBox时,清除当前的输入内容),会很意外地发现,这时候不论怎么点击都无法点击到其他控件,焦点一直 ...

  6. C#编程之“串口通讯多次接收”

    摘要: 主要记录了再C#的串口开发时遇到的问题,以便后续遇到相同问题再重复砍树造轮子. 1.问题场景 板卡和PC间通过UART进行数据通讯,由PC给板卡发送控制命令,板卡返回相应的数据. 2.遇到的问 ...

  7. Photoshop定义画笔选区为空的原因

    定义画笔预设时,选择选区后需填充黑色,否则将出现选区为空的提示

  8. Linux软件安装管理 - CentOS (二)

    1. 软件包管理简介 2. rpm命令管理(Redhat Package Manager) 3. yum在线安装 3.1 yum源文件 vi /etc/yum.repos.d/CentOS-Base. ...

  9. openstack私有云布署实践【11.3 计算nova - compute节点-nova用户免密登录（用于云主机冷迁移+扩展云主机大小）】

    云主机迁移+扩展云主机大小 ,官方说它依赖nova用户之间的免密登录.确保每个resion区域的compute节点服务器他们可以相互SSH免密   compute1-7     他们相互SSH免密 k ...

  10. 使用python之环境管理

      情景1:不同python版本的管理 同一电脑上的多个python版本之前的管理,为了突出问题的普遍存在,下面是有人在segmentfault上提的问题. 摘自:http://segmentfaul ...