总结26 前端之BootStrap框架

最新推荐文章于 2022-10-16 18:13:30 发布

君を見つけて

最新推荐文章于 2022-10-16 18:13:30 发布

阅读量385

点赞数

分类专栏：前端文章标签： bootstrap html

本文链接：https://blog.csdn.net/chinatopno1/article/details/104227017

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

BootStrap框架简介

一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

特性二美化封装插件(拿来用系列)

BootStrap将CSS,JS,HTML等代码封装起来,仅仅只需要一点代码就能做到需要好几行CSS,JS,HTML代码才能实现的美化效果.
也就是拿来用系列!基本上你只需要到官网去查文档,复制过来拿来用就可以了.

特性二响应式布局系统

所谓响应式布局,就是同一个页面,对PC端,移动端等多种排版格局.
如果一个网站没有响应式布局,那么只能特地开发出一个手机端的页面才行.
而使用了响应式布局,则会依据屏幕尺寸自动地调整页面尺寸.

在这里插入图片描述

环境的搭建和资源导入

搭建

要使用BootStrap资源的话,需要先搭建环境.先去官网把文件下载过来,然后放到目录.
具体做法就是把’css’目录,'fonts’目录,'js’目录,文件放置到项目目录下.
'jquery-3.2.1.min.js’文件则放置到js目录下

资源导入

搭建好了后还不够,还需要导入资源,就是将BootStrap的框架文件导入到html文件中.
格式是固定的,此处直接粘贴代码作为模板了.
以后在使用BootStrap资源时,可以直接复制该模板
固定格式:

<!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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！
            -------------------------------------------该网页为BootStrap的标准固定模板,以后在使用BootStrap资源时,可以直接复制该模板---------------------------------------
            -------------------注意,要使用BootStrap资源的话,需要先搭建环境.具体做法就是把'css'目录,'fonts'目录,'js'目录,文件放置到项目目录下
                                        'jquery-3.2.1.min.js'文件则放置到js目录下.-------------------
     -->
    <title>Bootstrap 101 Template</title>

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


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<h1>你好，世界！</h1>
<button type="button" class="btn btn-primary">按钮</button>


</body>
</html>

响应式布局的使用

响应式布局的设备代号

xs：超小屏幕手机 (<768px)
sm：小屏幕平板 (≥768px)
md：中等屏幕桌面显示器 (≥992px)
lg：大屏幕大桌面显示器 (≥1200px)

如果实际的屏幕宽度小于格子的设备代码:
如果格子的是被代码为代表着电脑显示器大小的’md’,但却用手机的屏幕去浏览的话,那么一行将会只能有一个格子. 即:不能兼容

如果实际的屏幕宽度大于格子的设备代码:
如果格子的设备代码为手机屏幕大小的’xs’,但却用比它大的平板或电脑浏览的话,那么将会自动向上兼容,将原本一行一个格子的样式,转为一行多个格子的样式. 即:自动兼容

创建格式

响应式布局可以应用于多种层面,如图片的响应式布局,文本框的响应式布局.
此处用栅格的响应式布局为举例,
响应式布局的内容建议写入到div标签内,比如我想让视频和图片以响应式布局的形式显示,那么.将来可以把想要显示的通过响应式布局东西写入div标签内即可.

你也可以写入到非idv的其它标签,但这么做不规范,不推荐!,
因为’div’标签可以理解为一张白纸,而其它标签并不是.

容器分为:

container：两边留白
container-fluid：每一种设备都是100%宽度

响应式布局的标准定义格式(推荐):<div class="container"><div class="row"> <div class="col-指定设备代号-单个的格子占比数目">元素内容</div> </div> </div>
列如:

<div class="container">
    <div class="row">

    <div class="col-sm-1">你好</div>
    <div class="col-sm-1">你好</div>
    <div class="col-sm-1">你好</div>
    <div class="col-sm-1">你好</div>
    <div class="col-sm-1">你好</div>
    <div class="col-sm-1">你好</div>


    </div>

</div>

响应式布局的非标准格式(不推荐):<最高父级标签名> <标签名 col-指定设备代号-单个的格子占比数目> </最高父级标签名>
列如:

    div >

    <a class="col-xs-1">你好!</a>
    <a class="col-xs-1">你好!</a>
    <a class="col-xs-1">你好!</a>
    <a class="col-xs-1">你好!</a>
    <a class="col-xs-1">你好!</a>


    </div>

关于格子占比数目

'格子占比数目’指的是每个栅格相对于屏幕宽度所占的范围来讲的.
因此,有时会发生自动换行,而发生自动换行的情况分为两种.
第一种: 单个格子占比数目虽不超过12,但格子标签数量多,超过了屏幕宽度,那么就会自动换行.
第二种: 单个格子的占比数目超过了12,将会连带该格子之后的格子一起换行

注意:表格还可以被隐藏
在这里插入图片描述

在这里插入图片描述

拿来用系列

BootStrap的使用方式很简单,只需要在标签处定义一个class属性,而属性值就是BootStrap的调用定义.
其中,一个class属性值中可以包含多个BootStarp的美化调用名.以空格为分割.
格式: <标签名 class="BootStarp调用名1 BootStarp调用名2 BootStarp调用名3">
如:

<button type="button" class="btn btn-primary">按钮</button>

注意:框架这个东西都是自学的,而BootStrap这个框架有许多拿来就用系列,意思就是直接选样式,看中了就复制粘贴即可.

按钮拿来用

格式:<标签名 class="BootStarp调用名">
列如:

<button type="button" class="btn btn-primary">（首选项）Primary</button>

调用名列表:
参考文档网址:https://v3.bootcss.com/css/#buttons

btn btn-default 默认样式

btn btn-primary 首选项

btn btn-success 成功

btn btn-info 一般信息

btn btn-warning 警告

btn btn-danger 危险

btn btn-link 链接

图片拿来用

在这里插入图片描述
方形图片定义格式: <img src="图片路径" alt="..." class="img-rounded">
圆形图片定义格式:<img src="图片路径" alt="..." class="img-circle">
相框图片定义格式:<img src="图片路径" alt="..." class="img-thumbnail">

响应式图片定义格式:<img src="图片路径" class="img-responsive" alt="Responsive image">
意义:不管屏幕尺寸是多少,都能保证图片占比窗口尺寸为100% 也就是不管窗口大小,图片都能显示出全部部分.

表格拿来用

调用名和样式参考列表:https://v3.bootcss.com/css/#tables
常用属性:

table
2.table-bordered
3.able-hover

格式:

<table class="一个或多个属性名">
  //表格体:tr th td子标签
</table>

列如:

    <table class="table table-bordered table-hover">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>

        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>23</td>
        </tr>
    </table>

表单拿来用(牛逼)

调用名和样式参考网址:https://v3.bootcss.com/css/#forms

导航条拿来用(组件)

参考网址:https://v3.bootcss.com/components/#navbar

分页条拿来用(组件)

参考网址:https://v3.bootcss.com/components/#pagination

轮播条拿来就用(JS插件)

参考网址:https://v3.bootcss.com/javascript/#carousel

君を見つけて

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结26 前端之BootStrap框架

BootStrap框架简介一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。特性二美化封装插件(拿来用系列)BootStrap将CSS,JS,HTML等代码封装起来,仅仅只需要一点代码就能做到需要好几行CSS,JS,HTML代码才能实现的美化...
复制链接

扫一扫