-
只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。
查看全部 -
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。
查看全部 -
千万注意,你的<table>元素中一定不能缺少类名“table”。
查看全部 -
.table-condensed:紧凑型表格
已经改为
.table-sm
查看全部 -
<:
>:
<>
查看全部 -
<ol>
<li>有序项目列表一</li>
<li>有序项目列表二
<ul class="list-unstyled">
<li>有序二级项目列表一</li>
<li>有序二级项目列表二
<ul>
<li>无序三级项目列表一</li>
<li>无序三级项目列表二
<ul class="list-unstyled">
<li>无序四级项目列表一</li>
<li>无序四级项目列表二</li>
</ul>
</li>
<li>无序三级项目列表三</li>
</ul>
</li>
<li>有序二级项目列表三</li>
</ul>
</li>
<li>有序项目列表三</li>
</ol>
查看全部 -
<h1><small></small></h1>
use <small></small> to define second title
put it inside 1st title
查看全部 -
在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。
<h1></h1>
<div class="h1"></div>
这两个结果是一样的
查看全部 -
rol="search"
role属性的作用是告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色,主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>基本导航条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.myLabel{
position: absolute;
top: -2px;
left: 42px;
}
.samllTriangle{
border-top: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #d9534f;
position: absolute;
top: 5px;
left: 42px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse">
<!-- 导航条标题 -->
<div class="navbar-header">
<a href="##" class="navbar-brand">民生新闻-老百姓身边的新闻</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">首页</a></li>
<!-- 增加标签 -->
<li >
<a href="##">热点</a>
<span class="label label-danger myLabel">hot</span>
<div class="samllTriangle"></div>
</li>
<li><a href="##">娱乐</a></li>
<!-- 二级菜单 -->
<li>
<a href="##" class="dropdown-toggle" data-toggle="dropdown">
体育
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">羽毛球</a></li>
<li><a href="#">足球</a></li>
<li class="disabled"><a href="#">篮球</a></li>
</ul>
</li>
<li><a href="##">社会</a></li>
</ul>
</div>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
查看全部 -
无序列表
<ul> <li>…</li> </ul>
有序列表
<ol> <li>…</li> </ol>
定义列表
<dl> <dt>…</dt> <dd>…</dd> </dl>
查看全部 -
<p class="text-left">我居左</p> <p class="text-center">我居中</p> <p class="text-right">我居右</p> <p class="text-justify">我两端对齐</p>
查看全部 -
p标签 通过改变类名,来强调文字的重要性
查看全部 -
<em>或<i>标签实现 字体斜体显示
查看全部 -
使用<b>和<strong>标签让文本直接加粗
查看全部
举报