Bootstrap前端ul框架

最新推荐文章于 2024-04-19 12:54:59 发布

Romandisea

最新推荐文章于 2024-04-19 12:54:59 发布

阅读量807

点赞数

分类专栏： javascript从入门到放弃 css你学废了吗 css3 文章标签： css js bootstrap

本文链接：https://blog.csdn.net/weixin_49200148/article/details/107984673

版权

javascript从入门到放弃同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

css你学废了吗

3 篇文章 0 订阅

订阅专栏

css3

2 篇文章 0 订阅

订阅专栏

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目

首先需要到官网进行下载

这个使用起来也是相当的简单的，只需要正常引入css文件以及js文件就行了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">//视口设置必须要
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
</head>

<body>
    <div class="container">//需要按照格式来写，这里就要参照文档了
  
	</div>
    <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>//此脚本基于jquery需要在jquery下面引入
</body>

</html>

文档的参照buduobb了，这个重点就是栅格系统
在这里插入图片描述

官方的解释都看完了吗，其实我觉得bb那么多就一句话，每行等分成12列就没了，就是这么简单

然后就是他有4个屏幕

/* 超小屏幕（手机，小于 768px） */==max-width:767px
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */==min-width:768px
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */==min-width:992px
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */==min-width:1200px
@media (min-width: @screen-lg-min) { ... }