Bootstrap介绍

最新推荐文章于 2022-08-18 21:39:46 发布

原创最新推荐文章于 2022-08-18 21:39:46 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#xssmmdlg的区别 #bootstrap

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

Bootstrap是一个html、css和js的一个前端框架，应用广泛，应用于响应式、移动设备优先的web项目。

由于bootstrap是基于jquery的所以应用bootstrap.js之前要引用jq。

bootstrap css 简介

前端开发人员习惯使用全局的css文件，bootstrap也是如此。

栅格系统

bootstrap是响应式解决的方案重点就是栅格系统，所谓栅格系统就是将整个屏幕划分成若干个（一般就是12）等宽的列，bootstrap中定义了一系列的预定义类用于实现栅格系统。

bootstrap的模板

<!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 模板</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- IE9以下版本使用HTML5需要使用两个文件：html5shiv.min.js和respond.min.js -->
    <!--[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>
</body>
</html>

常见的xs、sm、md、lg的区别

屏幕	典型设备	尺寸	命名
超小屏幕	手机	<768	-xs(extar small)
小屏幕	平板	>768	-sm(small)
中等屏幕	桌面显示器	>=992	-md
大屏幕	大规格显示器	>=1200	-lg(large)