bootstrap后台模板_Bootstrap使用简介（一）

最新推荐文章于 2024-03-19 09:55:40 发布

weixin_39949776

最新推荐文章于 2024-03-19 09:55:40 发布

阅读量669

点赞数

文章标签： bootstrap后台模板 bootstrap左右布局模板 bootstrap框架怎么用 bootstrap模板 bootstrap模板框架压缩包 bootstrap经典网页布局

网址:Bootstrap中文网

1.1 框架

我们使用提供的模板或者内容基础上去开发自己的内容

快速高效的开发代码

1.2 Bootstrap响应式框架

响应式：实现一个页面（url）适配各个终端

写一个网页预览这个网页的时候会根据不同的分辨率设置看到同一个网页

只是网页布局不同

1.3 Bootstrap使用场景

页面：pc端移动端(手机预览的页面) app(安卓苹果)

Bootstrap：pc端移动端平板

应用:企业站后台管理界面

实现项目网页--电脑和手机都可看 (要求响应式)---考虑Bootstrap

1.4 使用

Bootstrap打开官网---Bootstrap3.xx版本--点击起步

下载文件：

1.下载生产环境的

2.引入cdn

基本结构：

            <!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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

                <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
                <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
                <!--[if lt IE 9]>
                <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
                <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
                <![endif]-->
            </head>
            <body>
                <h1>你好，世界！</h1>

                <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
                <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
                <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
            </body>
            </html>

1.5 实现原理

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

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

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

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

总结:处理响应式布局可以考虑boostrap框架

但是也可以用css3的媒体查询去实现，Bootstrap的底层实现也是用的css3媒体查询

用css3的媒体查询实现可以更灵活

weixin_39949776

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap后台模板_Bootstrap使用简介（一）

网址:Bootstrap中文网 1.1 框架我们使用提供的模板或者内容基础上去开发自己的内容快速高效的开发代码 1.2 Bootstrap响应式框架响应式：实现一个页面（url）适配各个终端写一个网页预览这个网页的时候会根据不同的分辨率设置看到同一个网页只是网页布局不同 ...
复制链接

扫一扫