Bootstrap网站前端UI框架

  • 时间:
  • 浏览:66
  • 来源:CMS网站系统

进入Bootstrap官网 你会看到这样一句话:

使用世界上最流行的前端组件库在Web上构建响应式,移动优先的项目。

Bootstrap是一个用于使用HTML,CSS和JS开发的开源工具包。使用我们的Sass变量和mixins,响应式网格系统,大量的预构建组件以及基于jQuery构建的强大插件,可以快速为您的想法制作原型或构建整个应用程序。

bootstrap 是目前最多网页前端使用的UI框架之一,框架简单大方,用起来比较方面前端小白也很容易上手,BootstrapCDN由StackPath的人们免费提供。简单几行代码就可以使用。

bootstrap的许多组件都需要使用JavaScript才能起作用。具体来说,它们需要jQueryPopper.jsbootstrap自己的JavaScript插件。将以下<script>s放在页面末尾,紧接在结束</body>标记之前,以启用它们。jQuery必须首先出现,然后是Popper.js,然后是我们的JavaScript插件。

bootstrap使用jQuery的slim版本,但也支持完整版本。

入门模板

确保您的页面设置了最新的设计和开发标准。这意味着使用HTML5文档类型,并包括视口元标记以实现适当的响应行为。放在一起,您的页面应如下所示:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

HTML5文件类型

Bootstrap需要使用HTML5文档类型。没有它,您会看到一些时髦的不完整样式,但是包括它不会引起任何可观的困扰。

<!doctype html>
<html lang="en">
  ...
</html>

响应式元标记

引导开发移动首先,在我们的移动设备首先优化的代码,然后扩展组件需要使用CSS媒体查询的战略。为确保所有设备都能正确渲染和触摸缩放,请将响应式视口元标记添加到中<head>

更多知识:

猜你喜欢

dedecms 标签 热门标签

关键字描述:代码标签热门"<>field:link/href/dede:tagDEDE热门标签代码模板代码:{dede:tagrow='10'sort='month

2020-06-21

dedecms安装教程

安装向导的网址开始进行DedeCMS的安装,在安装完成之后我们就可以看到我们的站点。 我们下载下来通常是一个压缩包,将其解压,然后将upload文件夹中的文件上传到网站的根目录中。

2020-06-21

dedecms织梦建站后怎么防止被黑,加强安全漏洞措施?

用过DEDECMS建站的朋友应该都知道织梦CMS系统是网站建设初学者常用的网站管理系统。但是由于很多漏洞总是被黑,所以网站建设上我们需要更多是加强网站安全漏洞的修复措施,接下来我们一起来讨论下

2020-05-23

#1f2a42 网页设计颜色代码

#1f2a42 网页设计颜色代码

2020-04-22

WeUI微信内网页和微信小程序前端UI

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

2020-04-22