Bootstrap

最新推荐文章于 2024-03-29 10:29:36 发布

咔咔客

最新推荐文章于 2024-03-29 10:29:36 发布

阅读量137

点赞数

本文链接：https://blog.csdn.net/qq_41956566/article/details/83338355

版权

Bootstarp：是基于HTML、CSS、JAVASCRIPT的前端框架（半成品），在jquery的基础工作（jQuery务必在bootStrap.mai.js之前引入），可以理解为Bootstrap就是jquery的一个插件，用于响应式布局（可以兼容多个设备（即终端））与移动设备优先的web项目

网站中有现成的插件、组件、全局css样式、定制与网站实例

编写时去寻找导航栏等写好的模版就行修改即可（不需要row容器，若是类容很少也可以不写row容器）：

导航栏：在组件中导航条中

图片轮播：插件的crouse里面

若类容有两个及以上最好写在row容器里面，便于分配占比以及设置xs、sm、md、lg的显示效果

模版：

<!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 101 Template</title>

<link href="../css/bootstrap.css" rel="stylesheet">

<script src="../js/jquery-1.11.3.min.js"></script>

<script src="../js/bootstrap.js"></script>
</head>
<body>
        
    <div class="container">
        ...
   </div>
   <div class="container-fluid">
       ...
   </div>
   <div>
       ...
   </div>
</body>
</html>

栅格系统：响应式、移动设备优先。随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

注意：行必须放到两种容器中去

xs:超小屏幕（手机<768px） sm：小屏幕（平板>=768px） md：中等屏幕（桌面>=992px） lg：大屏幕(>=1200px)

样式设置class=“” bootstrap框架几乎都已经写好了，直接使用即可

咔咔客

关注

0
点赞
踩
0

收藏

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

Bootstarp：是基于HTML、CSS、JAVASCRIPT的前端框架（半成品），在jquery的基础工作（jQuery务必在bootStrap.mai.js之前引入），可以理解为Bootstrap就是jquery的一个插件，用于响应式布局（可以兼容多个设备（即终端））与移动设备优先的web项目网站中有现成的插件、组件、全局css样式、定制与网站实例编写时去寻找导航栏等写好的模版就行修...
复制链接

扫一扫