专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

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

ins518 2024-12-04 12:02:15 技术文章 26 ℃ 0 评论

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

什么是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从业者。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表