Bootstrap

最新推荐文章于 2022-12-05 11:40:29 发布

Statikk_Shiv

最新推荐文章于 2022-12-05 11:40:29 发布

阅读量311

点赞数

本文链接：https://blog.csdn.net/qq_22242915/article/details/79286133

版权

导入

需要导入的文件，下载Bootstrap后dist文件夹下
这里写图片描述
右键导入

选择文件系统

最后别忘了导入jQuery文件，BootStrap依赖jQuery所以要注意引入顺序

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

viewport就是要显示的网页的内容大小（要和浏览器窗口大小区分，要显示的网页比浏览器窗口小，就出现滚动条了）
content=”width=device-width” 就是要显示的网页的宽度，等于设备的宽度
initial-scale=1.0 初始缩放值，
maximum-scale=1.0 最大缩放值（和上面的initial-scale=1.0一起，让要显示的网页一开始就是和设备窗口一样大小）
user-scalable=0 是否允许用户进行缩放

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度> viewpoint也就是要显示的网页的大小-->
        <!--width=device-width要显示的网页宽度为设备的理想宽度    initial-scale比例值，刚好适应于当前设备 不会出现页面大，窗口小 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap基本模板</title>

        <!-- 引入Bootstrap核心样式文件 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet">


    </head>

    <body>
        <h1>你好，世界！</h1>

        <!-- 引入jQuery核心js文件 -->
        <script src="../js/jquery-1.8.3.js"></script>
        <!-- 引入BootStrap核心js文件 -->
        <script src="../js/bootstrap.min.js"></script>
    </body>

</html>

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
        <!--视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，会将页面缩放到设备这么大来展示-->   
        <!--width   设置layout viewport  的宽度，为一个正整数，或字符串"width-device"(表示采用设备的宽度)
            initial-scale   设置页面的初始缩放值，为一个数字，可以带小数
            minimum-scale   允许用户的最小缩放值，为一个数字，可以带小数
            maximum-scale   允许用户的最大缩放值，为一个数字，可以带小数
            height  设置layout viewport  的高度，这个属性对我们并不重要，很少使用
            user-scalable   是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
            如果设置"user-scalable=no",那么"minimum-scale"和"maximum-scale"无效
        -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap完整模板</title>

        <!-- 引入Bootstrap核心样式文件 -->
        <link href="../../css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
        <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果，必须放置到web服务器中，暂时不必掌握 -->
      <!--[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>你好，世界！</h1>

        <!--前端开发建议：网站优化时，除了立即需要工作的js存放在head外，将大部分JS文件放在页面的末尾-->

        <!-- 引入jQuery核心js文件，必须放置在bootStrap.js前面！ -->
        <script src="../../js/jquery-1.11.0.min.js"></script>
        <!-- 引入BootStrap核心js文件 -->
        <script src="../../js/bootstrap.min.js"></script>
    </body>

</html>

打开Bootstrap官网，Bootstrap3中文文档有详细的起步脚手架等教程
这里写图片描述

这里写图片描述

布局容器

这里写图片描述

Bootstrap的container自带样式的

Bootstrap样式可以覆盖，但是要注意，既然是覆盖，应该在bootstrap.css后面
这里写图片描述
字体也是和原生的不一样

内联文本标签

mark标签，高亮显示
del标签，用于被删除的文本，字体中间加横线
s标签，表示无用文本
ins标签，表示插入文本，字体带下划线
small标签，表示小号文本
strong标签，着重，是用font-weight实现
em标签，斜线
对齐标签
列表，有序列表ol，无序列表ul，无样式列表，内联列表，描述
还有很多，可以直接看文档，

栅格系统

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
.col-xs-是超小屏幕（小于768px），.col-sm-是小屏幕（大于7 68px，小于992px），.col-md-是中等屏幕（大于等于992px，小于1200px），.col-lg-是大屏幕（大于等于1200px）
offset 列向右偏移
.visible-xs- 超小屏幕可见 .hidden-xs-超小屏幕隐藏