11 BootStrap 响应式布局

最新推荐文章于 2021-08-07 09:21:42 发布

壹仟

最新推荐文章于 2021-08-07 09:21:42 发布

阅读量200

点赞数

分类专栏： javaWeb # BootStrap

本文链接：https://blog.csdn.net/qq_44756419/article/details/104741214

版权

javaWeb 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

BootStrap

1 篇文章 0 订阅

订阅专栏

来自Twitter
好处
1. 响应式布局
  1. 只需要写一套网页即可，就可以适配不同分辨率的设备
.min.css 和.css区别
1. min文件中没有乱七八糟的回车、空格之类的东西，文件比较小，适合传输，但不适合阅读

标准的使用BootStrap模板的HTML文件

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>

</body>
</html>

响应式布局

栅格系统

步骤

定义容器
定义行
定义元素

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
        <div class="col-lg-1 col-xs-4 div1">1234</div>
    </div>
</div>

CSS样式和js插件
1. 全局css样式
  1. 按钮
  2. 图片
  3. 表格
  4. 表单
2. 组件
  1. 导航条
  2. 分页条
3. 插件
  1. 轮播图

壹仟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11 BootStrap 响应式布局

目录响应式布局栅格系统CSS样式和js插件全局css样式组件插件来自Twitter 好处响应式布局只需要写一套网页即可，就可以适配不同分辨率的设备 .min.css 和.css区别 min文件中没有乱七八糟的回车、空格之类的东西，文件比较小，适合传输，但不适合阅读标准的使用BootStrap模板的HTML文件 <...
复制链接

扫一扫