Bootstrap介绍

最新推荐文章于 2024-01-08 10:00:00 发布

燃烧岁月-------

最新推荐文章于 2024-01-08 10:00:00 发布

阅读量4.8k

点赞数

分类专栏： bootstrap 文章标签： xssmmdlg的区别 bootstrap

本文链接：https://blog.csdn.net/yangwenlongsss/article/details/78022406

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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)

<div class="col-xs-6" col-xs-push-6></div>
<div class="col-xs-4 col-xs-pull-6"></div>

燃烧岁月-------

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap介绍

Bootstrap是一个html、css和js的一个前端框架，应用广泛，应用于响应式、移动设备优先的web项目。由于bootstrap是基于jquery的所以应用bootstrap.js之前要引用jq。bootstrap css 简介前端开发人员习惯使用全局的css文件，bootstrap也是如此。栅格系统bootstrap是响应式解决的方案重点就是栅格系统，所谓栅格系
复制链接

扫一扫