2025年前端框架——Bootstrap

科技前沿 • 2025-02-17 20:13 • 阅读 28

大家好，我是讯享网，很高兴认识大家。

一、Bootstrap介绍

　　凡是使用过bootstrap的开发者，不外乎做这么两件事情：复制and粘贴。

　　Bootstrap官方网址：http://www.bootcss.com　

　　Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。它用于开发响应式布局、移动设备优先的 WEB 项目。

讯享网

1、为什么要写自适应的页面（相应式页面）？

　　电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m.baidu.com，这样做简直就是费力不讨好的活，所以聪明的程序员开发了一种自适应写法，即一次开发，处处显示！

2、Bootstrap页面基本模板

　　以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改。

　　拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <!--以最高的ie浏览器渲染-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--视口的设备 移动设备优先 支持移动端 在多个设备上适应 PC iphone android-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap Template</title>

        <!-- Bootstrap 必须引入Bootstrap-->
        <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
        <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.css">


        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
        <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <[endif]-->
    </head>
    <body>
        <h1>你好，世界！</h1>
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>-->
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
    </body>
</html>

讯享网

2025年前端框架——Bootstrap

一、Bootstrap介绍

1、为什么要写自适应的页面（相应式页面）？

2、Bootstrap页面基本模板

相关推荐