当前位置：网站首页 > IT知识 > 正文

突然领导让我搭前端页面，我好方，20分钟玩转Bootstrap

liuian 2024-12-11 15:44 101 浏览

随着互联网的发展，人们对网页的体验度不断提升，不仅仅是满足功能需求，还要追求审美，追求好的体验度。作为一个后端，写前端好难，怎么写好前端？

什么是Bootstrap？

基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。而且它还支持响应式布局。

Bootstrap学习路线

了解

Flat Ui
Bootstrap select2
Bootstrap datetimepicker
Bootstrap datatables
font awesome官网

熟练使用API:https://v3.bootcss.com/
全局CSS样式
组件
JavaScript插件

Bootstrap菜鸟使用步骤

进入：https://v3.bootcss.com 下载

下载后的文件

如何在项目中引用Bootstrap框架

步骤：

1、在项目中新建一个bootstrap目录，将提前下载好的文件copy到bootstrap文件目录中来（css、fonts、js）。并且将jquery的函数库插件也copy到项目中来。

2、页面中引入的标签及文件

<!--第一步：将bootstrap全局css样式文件引入-->
<!--响应式的开关-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--第一步：将bootstrap全局css样式文件引入-->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--第二步：将jquery插件引入，因所有的bootstrap js都需要jquery支持-->
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<!--第三步：将bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>

接下来打开API文档跟着操作

重点关注三个模块：全局css样式、组件、JavaScript插件

全部看完，实践跟着操作。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--响应式的开关-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--第一步：将bootstrap全局css样式文件引入-->
    <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<table class="table table-bordered table-hover">
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>
   <!--第二步：将jquery插件引入，因所有的bootstrap js都需要jquery支持-->
   <script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
   <!--第三步：将bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
   <script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

重点难点-栅格布局

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--响应式的开关-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--第一步：将bootstrap全局css样式文件引入-->
    <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style>
        div{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
     <!--  设置栅栏式布局-->
  <div  class="container"><!--或者container-fluid-->
      <div class="row">                                   -- col-xs-4 : 指小于768px的小设备
          <div class="col-xs-4">11</div>     -- col-sm-4 ：指>=768px的设备
          <div class="col-xs-4">22</div>     -- col-md-4 ：指>=992px设备
          <div class="col-xs-4">33</div>     -- col-lg-4 ：值1200px设备
        </div>
      <div class="row">
          <div class="col-md-4">11</div>
          <div class="col-md-4">22</div>
          <div class="col-md-4">33</div>
      </div>
      <div  class="row">
           <div  class="col-sm-4">11</div>
           <div  class="col-sm-4">22</div>
           <div  class="col-sm-4">33</div>
       </div>
       <div  class="row">
           <div  class="col-lg-4">11</div>
           <div  class="col-lg-4">22</div>
           <div  class="col-lg-4">33</div>
       </div>
    </div>
   <!--第二步：将jquery插件引入，因所有的bootstrap js都需要jquery支持-->
   <script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
   <!--第三步：将bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
   <script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

谁在最需要的时候轻轻拍着我肩膀，谁在最快乐的时候愿意和我分享。今天我的分享就到这里，大家有没有什么好的学习方法呢？欢迎来留言评论，和我们一起交流。如果喜欢我的文章，也欢迎大家关注、点赞、转发。我是丫丫，一个专注分享项目实战技能的IT从业者。

bootstrap label

上一篇：Bootstrap Blazor 组件介绍 Table(一)
下一篇：bootstrap的提示插件tooltip的使用

突然领导让我搭前端页面，我好方，20分钟玩转Bootstrap

什么是Bootstrap？

Bootstrap学习路线

Bootstrap菜鸟使用步骤

如何在项目中引用Bootstrap框架

接下来打开API文档跟着操作

重点难点-栅格布局

相关推荐

飞牛OS入门安装遇到问题，如何解决?

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

如何在 iPhone 和 Android 上恢复已删除的抖音消息

大模型手册: 保姆级用CherryStudio知识库

Boost高性能并发无锁队列指南:boost::lockfree::queue

西门子博途中如何输入读取和编辑date and time变量

我的Excel打开后是一堆乱码，如何解决?

用什么工具在Win中查看8G大的log文件?

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse