Bootstrap介绍
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 章 Bootstrap 介绍
学习要点:1.Bootstrap 概述2.Bootstrap 特点3.Bootstrap 结构4.创建第一个页面5.学习的各项准备 主讲教师:李炎恢 本节课我们主要了解一下 Boostrap 历史.特 ...
- [html5] 学习笔记-bootstrap介绍
1.Bootstrap介绍 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 2.下面对于官网上给出的最简单的一个bootstra ...
- 第二百三十一节，Bootstrap 介绍
Bootstrap 介绍 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boos ...
- 第1章 Bootstrap介绍
学习网址:http://www.bootcss.com/ 下载网址:http://v3.bootcss.com/ 下载后一共三个文件夹 css js fonts 引入的文件 <link rel= ...
- Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏
一.Bootstrap Bootstrap,来自 Twitter,是目前最受欢迎的前端框架. Python中,同样可以使用Bootstrap. 1. 导入Bootstrap库 from flask_b ...
- 前端基础之Bootstrap介绍
bootstrap简介 http://v3.bootcss.com/ Bootstrap优点: 下载: Bootstrap引入 <meta name="viewport" ...
- Bootstrap介绍以及配置
一.Bootstrap概述: 1.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的一个用于快速开发 Web 应用程序和网站的前端框架. 2.用于开发响应式布局.移动设备优先的 W ...
- Bootstrap 轻量级后台管理系统模板--ACE使用介绍
在上一篇基于Bootstrap介绍了一个免费的后台管理模板Charisma UI. 参见链接: 基于Jquery.Bootstrap的后台管理免费UI框架推荐--Charisma UI 今天继续分享一 ...
- Bootstrap 简介
一.Bootstrap介绍 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.本课时讲解 Bootstrap 的概念,并介绍 Boo ...
随机推荐
- 一步步优化JVM四：决定Java堆的大小以及内存占用
到目前为止,还没有做明确的优化工作.只是做了初始化选择工作,比如说:JVM部署模型.JVM运行环境.收集哪些垃圾回收器的信息以及需要遵守垃圾回收原则.这一步将介绍如何评估应用需要的内存大小以及Java ...
- jquery css hover
<script type="text/javascript"> $(function () { $("#<%=btnSubmit.ClientID%&g ...
- [HMLY]4.CocoaPods详解----制作
作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/20067595 转载请注明出处 学会使用别人的pods依赖库后,你一 ...
- 用python做中文自然语言预处理
这篇博客根据中文自然语言预处理的步骤分成几个板块.以做LDA实验为例,在处理数据之前,会写一个类似于实验报告的东西,用来指导做实验,OK,举例: 一,实验数据预处理(python,结巴分词)1.对于爬 ...
- C#Winform实现自动更新
服务端: [WebMethod] public string GetNewService(string version) { //通过版本号进行比较 if (version == "v1.0 ...
- hdu 1846 Brave Game 简单博弈
Problem Description 十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中 ...
- Two Pointers - leetcode [两指针问题]
125. Valid Palindrome consider only alphanumeric characters and ignore cases. transform(s.begin(), s ...
- MySql 安装过程（摘自网络）
下面的是MySQL安装的图解,用的可执行文件安装的,详细说明了一下! 打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩, 运行“setup.exe”,出现如下界面 ...
- 4天html总结
- MyBatis-防止Sql注入以及sql中#{}与${}取参数的区别
#{}能够更安全的取出参数 ${}取出的参数不安全 尽量不要使用${}取参数 原因: A:select * from table where a = '10001' and b = ${paramet ...