首页 > 其他分享 >【1.0】前端框架Bootstrap

【1.0】前端框架Bootstrap

时间：2024-02-28 16:38:15浏览次数：21  
标签：容器 布局 1.0 Column 前端 Bootstrap content button

【零】引入

  • 该框架已经帮我们写好了很多页面样式，如果需要使用，只需要下载对应文件
  • 直接CV拷贝即可
  • 在使用Bootstrap的时候，所有的页面样式只需要通过修改class属性来调节即可

【一】什么是Bootstrap

  • Bootstrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序。
    • 它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。
  • Bootstrap最初由Twitter的一些工程师创建，旨在简化Web开发的过程。
    • 它提供了一个广泛的预定义样式和组件库，可以轻松自定义和扩展，以满足各种需求。
  • 使用Bootstrap，开发人员可以更加专注于网站或应用程序的功能和逻辑，而不必从头开始编写CSS样式和设计页面布局。
    • 它提供了响应式布局的支持，使得页面能够自适应不同的设备和屏幕尺寸。
    • 此外，Bootstrap还提供了丰富的UI组件（如导航栏、按钮、表单、模态框等），使开发人员能够轻松地在项目中使用这些现成的组件。
  • 总而言之，Bootstrap是一个强大的开发工具，可帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序。

【二】Bootstrap引入

中文文档查询：https://www.bootcss.com/

【1】CDN加速链接

twitter-bootstrap (v5.2.3) - Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

  • 压缩文档链接引入
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js

【2】注意

  • 网络连接引入在本地不会提示相关的补充
  • 下载本地文档较为友好

Bootstrap的js代码是基于jQuery的

在使用bootstrap做动态效果时一定要引入jQuery!!!

【三】布局容器

  • 布局容器是指用于组织和排列其他元素的容器或容器类。
  • 在前端开发中，常用的布局容器有以下三种

【1】块级布局容器（Block-Level Layout Container）

  • 块级布局容器会生成一个块级框，它可以使用display属性设置为"block"、"flex"或者"grid"。
  • 常见的HTML元素如<div>、<p>、<section>等都是块级布局容器。
  • 块级容器会独占一行，并通过CSS属性进行自上而下的垂直排列。

【2】行内布局容器（Inline Layout Container）

  • 行内布局容器会生成一个行内框，它可以使用display属性设置为"inline"或者"inline-block"。
  • 常见的HTML元素如<span>、<a>、<em>等都是行内布局容器。
  • 行内容器会水平地从左到右排列，直到行的边缘，然后自动换行。

【3】弹性布局容器（Flexbox Layout Container）

  • 弹性布局容器是CSS3中的一种新型布局技术，通过定义父元素作为弹性容器，将其子元素称为弹性项。
  • 弹性容器通过一系列的属性灵活地控制和调整弹性项的尺寸和位置。
  • 常见的属性包括：flex-direction、justify-content、align-items等。
  • 弹性布局容器的主要好处是可以实现响应式布局和灵活的排列方式。

【4】留白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

   <style>
      .c1 {
         height: 1000px;
         width: 1000px;
         background-color: red;
      }
      
      .c2 {
         height: 1000px;
         width: 1000px;
         background-color: red;
      }
   </style>

</head>
<body>
<div class="container c1"></div> /*左右两侧有留白*/
<div class="container-fluid c2"></div> /*左右两侧没有留白*/
</body>
</html>

【四】栅格系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  本地 链接 引入方法  -->
    <!--  Websource 文件夹 拷贝到当前文件夹下即可使用  -->
    <script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script>
    <script src="Websource\Bootstrap\js\bootstrap.min.js"></script>
    <link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
    <!--  CDN 链接 引入方法  -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jquery</script>

    <style>
        .c1 {
            height: 100px;
            background-color: red;
            border: 5px solid black;

        }

        .c2 {
            height: 100px;
            background-color: green;
        }
    </style>


</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 c1"></div>
        <div class="col-md-6 c1"></div>

        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
        <div class="col-md-1 c1"></div>
    </div>

</div>

</body>
</html>

<div class="row">
  • 写一个 row 就是将所在区域划分成 12 份
<div class="col-md-6"></div>
  • 写一个 col-md-6 获取想要的份数

【五】栅格参数

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

针对不同的显示器，要加上不同的参数

【六】列偏移

  • 使用 .col-md-offset-* 类可以将列向右侧偏移。
  • 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
  • 例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

【七】表格样式

  • bootstrap在设置页面的时候将字体设置成了肉眼可以接受的好看一点的字体。

【1】条纹状表格

  • 通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

【2】带边框的表格

  • 添加 .table-bordered 类为表格和其中的每个单元格增加边框。
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

鼠标悬停

  • 通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

紧缩表格

  • 通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
<table class="table table-condensed">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

状态类

通过这些状态类可以为行或单元格设置颜色。

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="success">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="info">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="warning">
      <th scope="row">7</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="danger">
      <th scope="row">9</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

【八】表单样式

  • 针对form表单，加样式优先考虑form-control
  • 针对radio和checkbox不能加!!!

【九】按钮组

【1】颜色

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

【2】大小

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

【十】图片

【1】形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

【2】颜色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

【3】清除浮动

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

【十一】图标

span标签

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

可以改颜色 - 操作普通文本方法相同

<script>
.c {color:red;}
</script>

图标参考网站：https://fontawesome.com.cn/

标签：容器,布局,1.0,Column,前端,Bootstrap,content,button
From： https://www.cnblogs.com/dream-ze/p/18040897

相关文章

  • 【2.0】前端基础jQuery之引入
    【一】jQuery基本语法【1】基本语法jQuery(选择器).action()【2】简写秉承jQuery宗旨，jQuery简写成$jQuery(选择器)---->$(选择器)【二】jQuery与原生JS代码比较将P标签内部的文本颜色改成红色<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-......
  • 【1.0】jQuery引入
    【一】什么是jQuery【1】概述jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Writeless,domore.“【2】小结jQuery内部封装......
  • GitHub上整理的一些工具（Web 前端相关）
    Web服务器性能/压力测试工具/负载均衡器http_load:程序非常小，解压后也不到100Kwebbench:是Linux下的一个网站压力测试工具，最多可以模拟3万个并发连接去测试网站的负载能力ab:ab是apache自带的一款功能强大的测试工具Siege:一款开源的压力测试工具，可以根据配置对一个WEB......
  • 前端面试题（四）—— 事件委托（Event Delegation）
    一、什么是事件委托事件委托（EventDelegation）是一种常用的技术。它利用事件冒泡的特性，在父元素上监听事件，而不是在子元素上直接添加事件监听器。通过在父元素上捕获事件，然后根据事件的目标（target）来执行相应的操作，从而实现对子元素的事件处理。二、实现方式通过给父元素添加事......
  • pickBy 在前端开发中的最佳实践和使用场景举例说明
    pickBy是lodash中的一个函数，其作用是过滤对象中的属性，只保留符合条件的属性。它的用法如下：_.pickBy(object,[predicate=_.identity])其中，object是要过滤的对象，predicate是一个可选的函数，用于定义过滤条件。如果没有传入predicate函数，则默认使用_.identity函数，即返回......
  • 代码中打开新窗体,前端和后端
    前端：1、window.open（）window.open() 方法是JavaScript中的一个内置方法，用于在浏览器中打开一个新的窗口或标签页。1）语法：window.open(url,name,features,replace);注意：由于弹出窗口的滥用已经成为了一个安全问题，现代浏览器通常会默认阻止 window.open() 方法的调用，除非是......
  • vue3前端代码
    <template><divclass="login-back"><divclass="login-container"><h2>人口信息管理系统</h2><el-formref="loginFormRef":model="loginForm":rules="loginRule......
  • .net+bootstrap写的一个还不错的音乐网站
    以前做的一款设计音乐网站，分享下。技术用的是.net+sqlserver  大致的样子是这样的。1、首页如下： 2、播放歌词页面如下：歌词自动滚动，且可悬停。 3、歌单信息页面如下：详细页面如下：可删除歌单中歌曲信息。 编辑页面如下：可进行编辑封面和歌单名、简介等。 个人信息......
  • 优雅使用前端枚举Enum，符合国标的那种！
    01、什么是枚举Enum？枚举Enum是在多种语言中都有的一种数据类型，用于表示一组特定相关的常量数据集合，如性别（男、女）、数据状态（可用、禁用）、垂直对齐（顶端、居中、底部）、星期等。特点是数据值固定，不会变，存储和显示的内容不同。然而在JavaScript中并没有枚举Enum类型，TypeScript算是有......
  • 前端导出和导入
    导出：constformElement=document.createElement('form');formElement.style.display='display:none;';formElement.method='post';formElement.action=window.configUrl.serverUrl+url;formElement.target='_self';const......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99