什么是Bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。它提供了一系列全局CSS样式,组件,js插件等等,支持栅格,响应式,css预编译等等。所以我们就只要使用他们写好样式的类就可以了,真的是简单方便明了。
基本模板:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
role属性的作用
<body role="document">
role的作用是描述一个非标准的tag的实际作用。
比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button。
role是一个html5的属性,role=”form”告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色是个表单,在button中role=”button”就是告诉设备,这是个按钮,可以点击。本质上是增强语义性,增强组件的可访问性、可用性和可交html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。
role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button
html5里面添加这个属性作为做辅助作用。
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
这是远程导入服务器中的bootstrap.min,css样式,可以下载到本地然后引入,比如:
<script src="css/bootstrap.min.css"></script>
标题
h1-h6 可以作为类,也可以作为标签。
h1-h6, h1:36px,
h2:30px,
h3:24px,
h4:18px,
逐渐减少6px,
h5除外 h5为14px,
h6:12px。
谷歌无法渲染出14px以下的字体
粗体斜体
粗体就是给文本加粗,在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中,可以使用和标签让文本直接加粗。
b,strong {
font-weight: bold; /*文本加粗*/
}
斜体类似于加粗一样,除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过使用标签或来实现。
一般是展现给爬虫看的(偏重语义),是展现给用户的(偏重视觉效果)。
定义列表与水平定义列表
对于定义列表而言,Bootstrap并没有做太多的调整,只是调整了行间距,外边距和字体加粗效果。
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>慕课网</dt>
<dd>一个真心在做教育的网站</dd>
</dl
水平定义列表就像内联列表一样,Bootstrap可以给 添加类名“.dl-horizontal”给定义列表实现水平显示效果。
此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;//将dt设置了一个左浮动
width: 160px;//设置了一个宽度为160px
overflow: hidden;//超出隐藏
clear: left;//清除浮动
text-align: right;//文本右对齐
text-overflow: ellipsis;//省略号
white-space: nowrap;//强制在同一行显示
}
.dl-horizontal dd {
margin-left: 180px;//将dd设置一个margin-left的值为180px,达到水平的效果
}
}
<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文</dd>
<dt>慕课网</dt>
<dd>一个专业的,真心实意在做培训的网站</dd>
<dt>我来测试一个标题,我来测试一个标题</dt>
<dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd>
</dl>
pre标签:代码
你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
<pre class="pre-scrollable">