资讯详情

Bootstrap学习笔记

文章目录

  • 前言
    • Bootstrap学习
      • 1、Bootstrap简介
        • 1.1、使用模板
      • 2、容器布局
        • 2.1、固定容器（Container）
        • 2.2、流体容器（Container-fluid）
      • 3、栅格系统
        • 3.1、列排序
        • 3.2、列偏移
        • 3.3.格栅盒模型设计的精致之处
        • 3.4、总结
      • 4、常用样式
        • 4.1.1、标题
        • 4.1.2、段落
        • 4.2、强调
          • 4.2.1、文本颜色
          • 4.2.2、对齐效果
        • 4.3、列表
        • 4.4、代码
        • 4.5、表格
          • 4.5.1、表格样式
          • 4.5.2、tr、th、td样式
          • 4.5.3、代码演示
        • 4.6、表单
          • 4.6.1、表单控件
            • 4.6.1.1、输入框text
            • 4.6.1.2.下拉选择框select
            • 4.6.1.3、复选框checkbox
            • 4.6.1.4、单选框radio
            • 4.6.1.5、按钮
          • 4.6.2、表单布局
            • 4.6.2.1、水平表单
            • 4.6.2.2、内联表单
      • 4.7、缩略图
      • 4.8、面板
      • 5、BootStrap插件
        • 5.1、导航
          • 5.1.1.标签导航
          • 5.1.2.胶囊导航
        • 5.2、分页导航
        • 5.3、下拉菜单
        • 5.4、模态框
          • 5.4.1、用法
          • 5.4.2、实例

前言

提示:这是我看尚硅谷和优极限的时候Bootstrap视频再次结合W3shcool、菜鸟编程整理的学习笔记:

有了Bootstrap之后，写前端页面更方便！写页面不仅简单快捷，效果也是你用的。HTML、CSS、JS、JQuery很难写出来。学完这个，从后端开发者的角度来看，写的页面足以满足我的心意！

Bootstrap学习

1、Bootstrap简介

Bootstrap 用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上面发布的开源产品。

优点

  • ：自 Bootstrap 3 框架包含了贯穿整个库的移动设备的优先款式。

  • ：自 Bootstrap 3 框架包含了贯穿整个库的移动设备的优先款式。

  • ：只要您具备 HTML 和 CSS 你可以开始学习基础知识 Bootstrap。

  • ：Bootstrap 的响应式 CSS 能够适应台式机、平板电脑和手机。有关响应设计详见 Bootstrap 响应设计。

  • 它为开发人员创建界面提供了简单统一的解决方案。

  • 它包含功能强大的内置组件，易于定制。

  • 它还提供了基础 Web 的定制。

  • 它是开源的。

基本内容

1.1、使用模板

使用下面给出的超级简单 HTML 模板，或修改。强烈建议您根据自己的需要修改这些例子，而不是简单地复制和粘贴。

<!doctype html> <html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

简洁模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- viewport表示用户是否可以缩放页面 width指定视区的逻辑宽度 device-width指示视区宽度应为设备的屏幕宽度 initial-scale指令用于设置web页面的初始缩放比例 initial-scale=1则将显示未经缩放的web文档 -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Bootstrap的HTML标准模板</title>
  <!-- 载入Bootstrap的CSS-->
  <link href="IntoBootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello Boostrap</h1>
<!--如果要使用Bootstrap的js插件,必须先调入jQuery-->
<script src="js/jquery-3.6.0.js"></script>
<!--包括所有Boostrap的js插件或者可以根据需要使用的js插件调用-->
<script src="IntoBootstrap/js/bootstrap.min.js"></script>
</body>
</html>

实例模板：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>bootstrap布局</title>
    <link href="../dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>

</body>
<script src="../js/jquery-3.6.0.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
</html>

模板简单说明

  1. 引入bootstrap的CSS文件
  2. 如果使用它的jquery插件的话，要引入jquery

2、容器布局

2.1、固定容器（Container）

用固定宽度并支持响应式布局的容器

<div class="container">
  ...
</div>
阈值 width/px
大于等于1200（lg 大屏 pc） 1170
大于等于992，小于1200 （md 中屏） 970
大于等于768，小于992 （sm 平板） 750
小于768 （xs 移动手机） auto

2.2、流体容器（Container-fluid）

用100%宽度，，占据全部视口(viewport)的容器

拓展：

  • width属性值为auto和100%是不一样的
    • 100%表示子元素的宽度和父元素的宽度相等，其中并不包括子元素内外边距以及边框的值，为子元素真正的宽度
    • auto表示子元素的 宽度+内边距+外边距+边框 才等于父元素的宽度

3、栅格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

移动设备优先策略

  • 内容
    • 决定什么是最重要的。
  • 布局
    • 优先设计更小的宽度。
    • 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
  • 渐进增强
    • 随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

  • 行必须放置在 class 内，以便获得适当的对齐（alignment）和内边距（padding）。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内，且唯有列可以是行的直接子元素。
  • 预定义的网格类，比如 和 ，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 。

代码演示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>栅格系统</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
    <style> .container{ 
           background-color: yellow; } div[class|=col]{ 
           border: 1px solid; height: 50px; } </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-8"></div>
        <div class="col-lg-6 col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-8"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
</div>
</body>
<script src="../js/jquery-3.6.0.js"></script>
<script src="../dist/js/bootstrap.js"></script>
</html>

实例—缩略图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=none">
    <title>缩略图</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.css">
    <style> h3,p{ 
           text-align: center; } a{ 
           text-decoration: none; } a:hover{ 
           text-decoration: none; } </style>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>Hello, Thumbnails!</h1>
        <p>这是一个略缩图的实例。</p>
    </div>
    <div class="row">
        <div class="col-lg-3 col-lg-push-9 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/aliyun.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">阿里云</a></h3>
                    <p>无影云桌面</p>
                    阿里云-全球领先的云计算及人工智能公司。阿里云最全特惠活动聚集于此！
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-push-3 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/webpack.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">Webpack</a></h3>
                    <p>是前端资源模块化管理和打包工具</p>
                    Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将模块按照依赖打包成前端资源。
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-pull-3 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/react.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">React</a></h3>
                    <p>用于构建用户界面的 JavaScript 框架</p>
                    React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/bootstrap.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">优站精选</a></h3>
                    <p>Bootstrap 网站实例</p>
                    Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../js/jquery-3.6.0.js"></script>
<script src="../../dist/js/bootstrap.js"></script>
</html>

3.1、列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 和 类的内置网格列的顺序，其中 * 范围是从 到 。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 和 类来互换这两列的顺序

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="background-color: #dedef8 

        标签： cn槽型连接器流体连接器组件
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台