室友蹲了个坑,我入门了Bootstrap

举报
小羊不会飞 发表于 2022/04/01 10:35:46 2022/04/01
【摘要】 室友蹲了个坑,我入门了Bootstrap

🐏小羊简介:


💖博客主页:小羊不会飞

🚀年龄:20    大二在读   

💪爱好:干饭,运动,码代码,看书,旅游

📃即将更新:

🎯1、手把手带你搭建个人博客网站

🎯2、后台管理系统模块更新

🚍:感兴趣的朋友,赶紧上车吧!!

🎉欢迎关注🔍点赞👍收藏🎇留言📙

🎄有任何疑问,欢迎留言讨论!!!

目录

1、简单介绍一下Bootstrap💦

2、Bootsrap模板💦

3、布局容器和栅格网格系统💦

3.1  .container类用于固定宽度并支持响应式布局的容器✨

3.2  .container-fluid类用于100%宽度,占据全部视口(viewport)的容器✨

3.3  栅格系统✨

4、Bootstrap插件💦 

4.1 导航✨

4.2下拉菜单✨

4.4 模态框✨

5、项目实战💦


1、简单介绍一下Bootstrap💦

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

🎄概述:Bootstrap一个前端开发的框架,来自Twitter,是目前很受欢迎的前端框架,是基于HTML,CSS、javas的,它简洁灵活,使得web开发更加敏捷。一个半成品软件,开发人员可以在框架的基础上,在进行开发,简化编码。
🎄优点:
1.定义了很多的css样式和一些js的插件,我们开发人员可以直接使用这些样式和插件得到丰富的页面效果。
2.响应式布局:同一套页面可以兼容不同分辨率的设备,如下:

xs:超小屏幕 手机 (<768px):.col-xs-12
sm:小屏幕 平板 (≥768px)
md:中等屏幕 桌面显示器 (≥992px)
lg:大屏幕 大桌面显示器 (≥1200px)
Bootstrap中文网


2、Bootsrap模板💦

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_19,color_FFFFFF,t_70,g_se,x_16

<!DOCTYPE html>
<html lang="en">
<head><!--设置当前HTML文件的字符编码--><!--compatible兼容的,设置浏览器的兼容模式版本(让IE使用最新的渲染引擎工作)--><!--声明当前网页在移动端浏览器展示的相关设置-->
    <!-- viewport表示用户是否可以缩放页面width指定视区的逻辑宽度device-width指定视区宽度应为设备的屏幕宽度initial-scale指令用于设置Web页面的初始化缩放比例initial-scale-1则将显示未经缩放的Web文档 -->
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --><title>Bootstrap基本的HTML模板</title><!--引入Bootstrap核心样式表(CSS)文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/><!--引入html5shiv.min.js让浏览器可以识别HTML5的新标签-->
    <!--引入respond.min.js让低版本浏览器可以使用CSS3的媒体查询--><!--[if It IE 9]>
    <script src="html5shiv/html5shiv.min.js"></script>
    <script src="Respond/respond.min.js"></script><![endif]--><!--自己写的CSS样式文件放head最下面--></head>
<body>
<div><h1>Hello,world!</h1></div><!-- Bootstrap的所有JS组件都是依赖jQuery的,所以必须放在前边-->
<script src="js/jquery.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
<script src="bootstrap/js/bootstrap.min.js"></script><!--自己写的js文件放在body最下面--></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><title>Bootstrap基本的HTML模板</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div><h1>Hello,world!</h1></div>
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

温馨提示:Bootstrap和Jquery 可以在Bootstrap官网下载


3、布局容器和栅格网格系统💦

3.1  .container类用于固定宽度并支持响应式布局的容器

<div class="container">.........</div>

划重点:目前大部分网站都是采用这种布局(两边留空),例如京东的网页、天猫的网页

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16


3.2  .container-fluid类用于100%宽度,占据全部视口(viewport)的容器

<div class="container-fluid">.......</div>

3.3  栅格系统✨

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16(温馨提示:这里记得引入bootstrap的css样式包)

<div class="container">
    <div class="row">
        <div class="col-sm"> 三分之一空间占位</div>
        <div class="col-sm"> 三分之一空间占位</div>
        <div class="col-sm"> 三分之一空间占位</div>
    </div>
</div>


4、Bootstrap插件💦 

4.1 导航✨

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_18,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_18,color_FFFFFF,t_70,g_se,x_16

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_16,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_11,color_FFFFFF,t_70,g_se,x_16


4.2下拉菜单✨

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

呈现出来的样式:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_9,color_FFFFFF,t_70,g_se,x_16

4.4 模态框✨

概述:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

 用法:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框(Modal)插件</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><h2>创建模态框(Modal)</h2><!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button><!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4></div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content --></div><!-- /.modal --></div>
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

5、项目实战💦

代码部分:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16

项目半成品 :

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP576K5LiN5Lya6aOe,size_20,color_FFFFFF,t_70,g_se,x_16


最后,博主来唠两句嗑啊,相信对web前端开发感兴趣的小伙伴应该都知道现在最火的两个主流框架是Vue和React,Bootstrap的话现在好像很少见,哈哈,我也是因为做项目才接触到Bootstrap的,本篇文章呢,也没有深入剖析这个框架,博主也是一直在不断的学习中,感兴趣的朋友可以深入了解哦,欢迎交流!😘



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200