插入符
表示下拉功能和方向，使用带有 class caret 的 <span> 元素得到该功能。
<p>关于我们<span class="caret"></span> </p>
快速浮动
可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。
<div class="pull-left"> 向左快速浮动 </div>
<div class="pull-right"> 向右快速浮动 </div>
内容居中
使用 class center-block 来居中元素。
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc;"> 这是 center-block 实例 </div>
</div>
显示和隐藏内容
通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏。
<div class="row">
<div class="show" > 这是 show class 的实例 </div>
<div class="hidden"> 这是 hide class 的实例 </div>
</div>
文本
以下不同的类展示了不同的文本颜色，如果文本是个链接,鼠标移动到文本上会变暗
背景
以下不同的类展示了不同的背景颜色， 如果文本是个链接鼠标移动到文本上会变暗
别的内容
媒体查询
Media Queries 实现了响应式设计
基本形式：
@media(条件){样式}
min-width
max-width
<head>
<meta charset="utf-8">
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
body{
background: black; //默认的背景颜色
}
@media(max-width:600px){ //小于等于600的时候执行下面的背景颜色
body{
background: skyblue;
}
}
</style>
</head>
<body> <style>
body{
background: black; /* 默认的背景颜色 */
}
@media(min-width:600px) and (max-width:720px){ /* 600到720之间执行天蓝色 */
body{
background: skyblue;
}
}
</style> <style>
body{
background: black; /* 默认的背景颜色 */
}
@media(min-width:600px) and (max-width:720px){ /* 600到720之间执行天蓝色 */
body{
background: skyblue;
}
}
@media(max-width:600px){
body{
background: red;
}
}
</style>
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
