004--IDEA使用BootStrap网格

最新推荐文章于 2023-03-03 15:35:36 发布

enzoism

最新推荐文章于 2023-03-03 15:35:36 发布

阅读量338

点赞数

本文链接：https://blog.csdn.net/weixin_42288943/article/details/104166629

版权

本文档记录了在IDEA中使用BootStrap进行网格布局和媒体查询的实践过程。通过编写BootStrap网格demo和媒体查询代码，无需额外下载依赖，即可直接运行查看效果。

摘要由CSDN通过智能技术生成

1、写在前面

项目中有时候需要使用一些简单的FORM表单或者其他页面，总是不能快速的进行生成，刚好好久没有劫持到前端的学习了，在此记录学习过程

2、核心操作

编写BootStrap网格demo
编写BootStrap使用媒体查询【当前文件可以直接拷贝，然后运行，不需要下载BootStrap依赖】

3、操作步骤

3.1、编写BootStrap网格demo

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="jumbotron text-center">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置

最低0.47元/天解锁文章

enzoism

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
004--IDEA使用BootStrap网格

1、写在前面项目中有时候需要使用一些简单的FORM表单或者其他页面，总是不能快速的进行生成，刚好好久没有劫持到前端的学习了，在此记录学习过程2、核心操作编写BootStrap网格demo编写BootStrap使用媒体查询【当前文件可以直接拷贝，然后运行，不需要下载BootStrap依赖】3、操作步骤3.1、编写BootStrap网格demo<!D...
复制链接

扫一扫