HY的web前端day4 3.27_hy wang 前端-CSDN博客

本文链接：https://blog.csdn.net/qq_51167539/article/details/115362647

本文介绍了Bootstrap前端框架的基础知识，包括移动设备优先、响应式设计、全局排版和链接样式，以及如何创建按钮组。Bootstrap是一个基于HTML、CSS、JavaScript的框架，通过添加viewport meta标签实现移动友好，并使用img-responsive类使图片响应式。此外，还详细讲解了body的默认样式、链接的色彩和下划线效果，以及按钮组的创建和应用。

摘要由CSDN通过智能技术生成

HY的web前端day4

今天学习了关于Bootstrap

简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

安装环境

http://getbootstrap.com/ 在该网站下载已获得编译的css js和源代码

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

响应式号召

<img src="..." class="img-responsive" alt="响应式图像">

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

接下来让我们看下这个 class 包含了哪些 css 属性。

在下面的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

全局显示、排版和链接

Bootstrap 3 使用 body {margin: 0;} 来移除 body 的边距。

请看下面有关 body 的设置：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

排版
使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

链接样式
通过属性 @link-color 设置全局链接的颜色。

对于链接的默认样式，如下设置：

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

所以，当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为 #2a6496。同时，会呈现一条下划线。

除此之外，点击过的链接，会呈现一个颜色码为 #333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽，且对于基于 webkit 浏览器有一个 -webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2 像素。

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 Bootstrap 按钮（Button）插件添加可选的 JavaScript 单选框和复选框样式行为。

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<titl