前端的初学习 -- 第十五章 -- Bootstrap初了解

前端的初学习 -- 第十五章 -- Bootstrap初了解

什么是Bootstrap?

  • Bootstrap来自 Twitter,是目前最受欢迎的响应式前端框架。
  • Bootstrap是基于 HTML、CSS、JavaScript的,它简洁灵活,使得 Web 开发更加快捷。

为什么使用 Bootstrap?

  • 移动设备优先:自 Bootstrap3 起,框架包含了贯穿于整个库移动设备优先的样式。
    不是简单的增加一些可选的针对移动设备的样式,而是直接融合进了框架的内核中。
    也就是说,针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。
  • 浏览器支持:所有的主流浏览器都支持 Bootstrap。
  • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
  • 它为开发人员创建接口提供了一个简洁统一的解决方案。
  • 它包含了功能强大的内置组件,易于定制。 它还提供了基于 Web 的定制。
  • 它是开源的。

下载与使用

中文官网:https://www.bootcss.com/
英文官网:http://getbootstrap.com

下载好的,压缩包解压出来。就得到了bootstrap的资源文件了。
分别是css、js、font字体,全部放在项目的根目录即可

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link href="css/bootstrap.min.css" rel="stylesheet" />
   <title>拉勾有我-必须火</title>
 </head>
 <body style="padding:100px;">     
    <h1>Hello, Bootstrap!</h1>
    <!-- 注意:这两个按钮的class样式是Bootstrap定义的 -->      
    <button class="btn btn-primary">学习充电</button>
    <button class="btn btn-success">极速入职</button> 
 </body>
</html>

猜你喜欢

转载自blog.csdn.net/zy3062231314/article/details/114651001
今日推荐