bootstrap提高我们页面开发能力

黑马王子13
200 阅读6分钟

引言

页面开发一直是我们前端至关重要的一项功能，能否熟练掌握它是衡量一个程序员技术高低的一个重要考点。 而怎样快速且高效的掌握页面开发技巧呢？此时我们可以抛弃传统的、普通的页面开发技巧，使用一个效率更高的工具Bootstrap。

Bootstrap

首先我们先来介绍一下bootstrap。

bootstrap 是一个开源的前端框架，由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 于 2011 年创建。它提供了一套预定义的 CSS 和 JavaScript 组件，使开发者能够快速构建美观且响应式的网页。

区别

普通页面开发与bootstrap开发之间有明显区别，我们从以下几个方面对比：

  • 开发效率：

普通：需要编写大量html，css以及JavaScript代码实现页面布局和功能，开发复杂页面花费时间长。

bootstrap：提供了丰富的预定义组件，可以快速搭建页面布局，大大提高开发效率。只要引入bootstrap的css和js文件，使用类名即可快速布局

  • 响应式布局

普通：需要手动编写媒体查询和响应式布局代码，以确保页面在不同设备上显示良好。这需要对 CSS 媒体查询和响应式设计原理有深入的理解。

bootstrap：内置了响应式栅格系统和媒体查询，可以轻松实现跨设备的响应式设计。开发者只需要遵循bootstrap 的栅格系统规则，就能自动适应不同屏幕尺寸。

  • 代码复用性和维护性

普通：由于需要手动编写大量代码，代码复用性较差，维护起来也比较困难。每次需要更改样式或功能时，都需要手动修改多处代码。

bootstrap：通过使用预定义的类名和组件，代码复用性大大提高。维护时只需要修改少量的类名或配置，即可全局生效。

总结

相较于普通开发，利用bootstrap开发还是有许多优点的。唯一缺点就是，相较于传统开发，使用bootstrap开发的灵活性较差。有些需求是bootstrap提供的预定义样式和组件中没有的。

所以 普通页面开发 更适合需要高度定制化的项目，开发者可以完全控制每个细节。

  • bootstrap 开发 更适合需要快速搭建原型或中小规模项目的场景，能够显著提高开发效率和响应式设计的支持。

实战

经过介绍 我们直接来进行实战

先通过一个简单的页面来讲讲重要的两个用法

首先我们先引入bootstrap。我们可以通过cdn引入：

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

或者我们通过下载或本地引入：

<link href="path/to/bootstrap.min.css" rel="stylesheet">
<script src="path/to/bootstrap.bundle.min.js"></script>

此时我们就引入了bootstrap框架，可以开始构建页面

我们输入这样的几行代码

  <div class="container">
    <div class="row">
      <!-- 分栏 页面布局 -->
      <div class="col-md-6">
        567
      </div>
      <div class="col-md-6">
        123
      </div>

此时我们得到的页面是这样的

image.png 此时我们会感到很奇怪，为什么不像之前讲的一样。我们的布局如果是默认布局的话，内容的应该在页面左上角开始定位啊，这里为什么在页面顶部的右边开始呢？

container:仔细观察,container是传统开发里没有的，是bootstrap中特有的一个预定义的样式。 他的主要作用是在页面中创建一个居中固定的宽度容器。一般大小为：1140px，会给元素一个默认值margin-left：auto和margin-right：auto;与margin：0 auto相比，前者的性能更好。因此，元素不会从左上角开始定位。

row:这也是bootstrap中的一个预定义样式，用于创建一个行容器，与container结合使用。在其中放置列.col-，确保在水平方向上正确排列。

col-md-x:这是创建响应式列的用法，是栅格系统的一部分，可以自定义列的宽度。在bootstrap中的栅格系统是12列的，所以x可取1-12。此时我们若再加一个元素：此时代码变成：

  <div class="container">
    <div class="row">
      <!-- 分栏 页面布局 -->
      <div class="col-md-6">
        567
      </div>
      <div class="col-md-6">
        123
      </div>
      <div class="col-md-6">
        890
      </div>

image.png 此时因为三个元素想要占据的栅格系统都是6列，而栅格系统一共只有12列。等于说两个元素已经占满了一行所有的栅格。第三个元素只能占据下一行的栅格了。

而我们稍作调整

  <div class="container">
    <div class="row">
      <!-- 分栏 页面布局 -->
      <div class="col-md-3">
        567
      </div>
      <div class="col-md-7">
        123
      </div>
      <div class="col-md-2">
        890
      </div>

此时三个元素占据的栅格数等于12，我们得到

image.png

此时可以看到所有元素都排在一行里。

让我们来看看比较复杂的一段代码：

 <div class="col-md-6">
        <form name="appForm">
          <div class="form-group">
            <label for="titleInput">输入你的昵称：</label>
            <input type="text" name="title"
            id="titleInput"
             class="form-control"
            placeholder="请输入昵称"
             >
          </div>
          <div class="form-group">
            <label for="descInput">介绍一下自己：</label>
            <textarea  name="desc"
             class="form-control"
            placeholder="请输入对自己的描述"
            rows="3"
            ></textarea>
          </div>
          <div class="form-group">
            <button type="submit" 
            class="btn btn-default btn-primary">
              生成形象
            </button>
          </div>
        </form>
      </div>

此时我们得到一个比较完整的页面

image.png 这里我们用到了bootstrap中多个预定义的样式和类：

forms(表单)：

  • .form-group：用于包裹表单控件和标签，增加间距，使表单元素更加清晰和整齐。
  • .form-control：应用于输入框和文本区域，使其具有统一的样式。
  • <label> ：用于表单控件的标签，通过 for 属性与对应的输入控件关联。
  • <input> ：用于创建输入框，type="text" 表示文本输入框。
  • <textarea> ：用于创建多行文本输入框。
  • placeholder：用于输入框和文本区域的占位符文本，提示用户输入内容。
  • rows="3" ：指定 <textarea> 的行数。
  • class="form-control" ：应用于 <input> 和 <textarea> 元素，使其具有统一的样式，例如相同的边框、内边距和背景色。

btn(按钮)：

  • .btn：基本按钮样式。
  • .btn-default：默认按钮样式（在 Bootstrap 5 中，btn-default 类已被移除，可以使用 btn-secondary 或其他颜色类）。
  • .btn-primary：主按钮样式，通常用于主要操作按钮。

标签（Labels）

  • <label for="titleInput"> ：用于关联标签和输入控件，for 属性的值应与输入控件的 id 属性相同

注意 lable for + input id用于读屏聚焦，一般提供给特殊人员的无障碍访问。

总结

这里只介绍了bootstrap中很小一部分的使用技巧。如果大家对它感兴趣的话，可以自行去查找，使用。相信可以从中收获到一些高级程序员会的技巧。

avatar
文章
阅读
粉丝