了解Bootstrap

最新推荐文章于 2021-10-05 13:19:49 发布

原创最新推荐文章于 2021-10-05 13:19:49 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

bootStrap 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Bootstrap，它是用于开发响应式布局、移动设备优先WEB项目的HTML、CSS和JS框架。还阐述了role属性增强语义性、提升组件可访问性的作用，此外讲解了标题、粗体斜体、定义列表等在Bootstrap中的使用，以及pre标签控制代码块滚动的方法。

什么是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>