如何使用16或24列的bootstrap

Bootstrap 是一个流行的前端框架，它提供了一系列预定义的 CSS 类和 JavaScript 插件，用于快速开发响应式和移动优先的网站。Bootstrap 的网格系统是其核心特性之一，它允许开发者通过一系列的行（row）和列（column）来创建布局。

基础概念

Bootstrap 的网格系统基于 12 列布局，这意味着每一行最多可以有 12 列。通过使用预定义的类，可以轻松地创建不同宽度的列。虽然 Bootstrap 默认提供的是 12 列布局，但可以通过一些简单的数学计算来创建 16 或 24 列布局。

类型

12 列布局：Bootstrap 默认提供。
16 列布局：可以通过将每列的宽度设置为 col-xx-16 来实现。
24 列布局：可以通过将每列的宽度设置为 col-xx-24 来实现。

应用场景

响应式设计：Bootstrap 的网格系统非常适合创建响应式网站，可以根据不同的屏幕尺寸自动调整列的宽度。
复杂布局：对于需要复杂布局的页面，如仪表板或数据分析界面，16 或 24 列布局可以提供更多的灵活性。

示例代码

以下是如何使用 Bootstrap 创建 16 列和 24 列布局的示例代码：

16 列布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>16 Column Layout</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xx-16">Column 1</div>
      <div class="col-xx-16">Column 2</div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

24 列布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>24 Column Layout</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xx-24">Column 1</div>
      <div class="col-xx-24">Column 2</div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

解决常见问题

为什么 Bootstrap 默认只有 12 列？

Bootstrap 默认使用 12 列布局是因为 12 是一个可以被 2、3、4 和 6 整除的数字，这使得创建不同比例的列变得更加容易。例如，两个等宽的列可以通过 col-6 实现，三个等宽的列可以通过 col-4 实现。

如何自定义列数？

虽然 Bootstrap 默认只有 12 列，但可以通过自定义 CSS 来创建更多的列数。例如，可以通过以下方式创建 16 列布局：

.col-xx-16 {
  flex: 0 0 6.25%;
  max-width: 6.25%;
}

对于 24 列布局：

.col-xx-24 {
  flex: 0 0 4.16667%;
  max-width: 4.16667%;
}

参考链接

通过以上方法，你可以灵活地使用 Bootstrap 创建 16 或 24 列布局，以满足不同的设计需求。

相关·内容

如何使用 Bootstrap 创建加载、重定向或动作状态的进度条

Bootstrap 进度条。在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。 Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。...默认的进度条创建一个基本的进度条的步骤如下：添加一个带有 class .progress 的。...添加一个带有百分比表示的宽度的 style 属性，例如 style="width: 60%"; 表示进度条在 60% 的位置。...创建不同样式的进度条的步骤如下：添加一个带有 class .progress 的。...添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

1.9K2 0

使用Django suit或Bootstrap美化admin模板

比如我之前快速迭代的一个个人知识库，至少目前来说先解放了自己，能实现一些基本的功能，然后逐步深入，自己一边做产品经理，一边做开发人员，对于需求如何实现和规划，脑子里就有了一个基本的思路。...之前简单配置的知识库的截图如下，还算凑合吧，不算太丑。 ? 当然如果想实现一些看起来略好一些的界面，有两个捷径。一个是使用Django Suit，另外一个是配置Bootstrap....非常简单的步骤。效果还不错。而如果启动Bootstrap，则效果会更炫。我非常看好这个方向，因为现在的大前端优势已经很明显了。...观点就是这个，我们来看看bootstrap的一个基本的改进，如果要细化的改进，那应该会有很多的工作需要确认或者细化。...在settings.py文件里修改应用列表，添加bootstrap的界面即可，比如这个配置。 INSTALLED_APPS = ( 'bootstrap_admin', 。。。

2.5K3 0

使用 Java 16 或 Kotlin 更好的进行插件或模组开发

使用 Java 16 或 Kotlin 更好的进行插件或模组开发声明：本文章中 Java 8 至 Java 16 以来变化的内容整理自这个网站，您可以访问该网站以了解更多新版本 Java 的更改简洁起见...从 Java Edition 1.17（正确的来说，是 21w19a）开始，Minecraft 需要 Java 16 或更新版本才能运行。...本文的存在就是这个意义，我们将介绍从 Java 8 开始到 Java 16 重要的开发内容更新，并附带这些更新在以 Java 8 为运行时的 Kotlin 是如何处理的，以帮助开发者们能够更快的适应和享受新的...以普遍理性而言，这些开发者应当可以切换到 Java 16 进行开发：所有面向 Minecraft 1.17 或更高版本进行开发的模组/插件开发者面向 Minecraft 1.13+ 的 Bukkit...使用 var 更简洁的创建局部变量 In Java 8 final List list = new ArrayList(); In Java 16 final var list =

5892 0

为什么以及如何升级至 Java 16 或 17

17（一旦发布），并就如何完成升级提供了一些实用的建议。...直播的内容基于我个人的 GitHub 库 JavaUpgrades，其中有文档和示例介绍了升级到 Java 16 或 Java 17 时常见的难题和异常。...或 JDKMon。对于我 GitHub 库中的示例，我使用 Docker 和不同的 JDK 版本来说明特定的特性如何工作或造成破坏。你可以试一下相关特性，而不必安装多个 JDK 版本。...如果你有任何代码或依赖项仍然使用 JDK 内部构件，那么可以尝试使用 JDK 的高级 API 来解决这个问题。...对于任何插件或依赖项，你可能会在构建应用程序时看到这条消息“不支持的类文件主版本 61”。类文件主版本 61 用于 Java 17，60 用于 Java 16。

1.1K3 0

为什么以及如何升级至 Java 16 或 17

作者 | Johan Janssen 译者 | 平川策划 | Tina 在 2021 年 4 月 27 日的 InfoQ 直播中，我探讨了为什么应该考虑升级到 Java 16 或 Java...17（一旦发布），并就如何完成升级提供了一些实用的建议。...直播的内容基于我个人的 GitHub 库 JavaUpgrades，其中有文档和示例介绍了升级到 Java 16 或 Java 17 时常见的难题和异常。...或 JDKMon。对于我 GitHub 库中的示例，我使用 Docker 和不同的 JDK 版本来说明特定的特性如何工作或造成破坏。你可以试一下相关特性，而不必安装多个 JDK 版本。...如果你有任何代码或依赖项仍然使用 JDK 内部构件，那么可以尝试使用 JDK 的高级 API 来解决这个问题。

1.3K1 0

如何使用 Bootstrap 搭建更合理的 HTML 结构

但是很多人在使用 Bootstrap 时只是依照文档盲目的复制黏贴，并没有仔细考虑每个类的用处，也没有考虑 HTML 结构搭建的是否合理。...本文的目的就是介绍如何使用 Bootstrap 搭建常用的布局，并保证布局具有合理的 HTML 结构。不管是传统开发，还是使用框架，搭建布局的思想是不会变的。...虽然栅格布局很好，但在工作中一定要谨慎使用，因为很多不懂前端的设计师或产品会对前端人员吹毛求疵，这样的话也只能根据具体要求做一些调整了。...言归正传，本文主要介绍了在使用 Bootstrap 时如何搭建更合理的结构，然而在实际工作中，不管我们用不用框架，都应该尽可能的精简并规范化 HTML 结构，这是前端开发人员应该养成的良好习惯。...我在之前也写了一篇关于 helper 的文章《如何编写通用的 Helper Class》，感兴趣的话可以看一看。

2.1K5 0

bootstrap 表格插件bootstrap-table的使用

最近找到一款比较好的表格插件bootstrap-table，根据名称我们可以看出是基于bootstrap框架下的表格，功能较多，可以锁定头部，排序以及搜索，用法也比较简单，只要引用css与js 使用以...data开头的自定义属性及可完成所有的功能，在使用中发现一个问题，就是在模态框中使用固定头部的表格底部会溢出，在非模态框即单独的页面中无此问题，现暂时解决的方法是 $(".fixed-table-container

1.8K1 0

BootStrap的学习与使用

BootStrap 1.概述： * 一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。...Bootstrap是基于html，css，JavaScript的，它简洁灵活，使得web开发更加快捷。 * 框架：一个半成品，开发人员可以在框架基础上，再进行开发，简化编码。...我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2.响应式布局： * 同一套页面可以兼容不同分辨率的设备。 2....快速入门 1.下载Bootstrap 2.在项目中将这三个文件夹复制 3.创建html页面，引入必要的资源文件或等于分界点大小的设备； 3.如果真是设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。 4. CSS样式和JS插件： 1.

1.5K1 0

bootstrap之datetimepicker的使用

1、引入文件除了引入基本的jquery和bootstrap的js、bootstrap的css外，还需要引入bootstrap-datetimepicker.min.js，还有就是bootstrap-datetimepicker.zh-CN.js...2、使用的例子 List-1 html 对应的js如下List-2所示 List-2 $("#startDate").datetimepicker({ format: 'yyyy-mm-dd',//显示格式...1, autoclose: 1//选择后自动关闭 }).on('changeDate', function (e) { console.log(e.target.value);//得到的就是选择了的日期...}); List-2中可以设置参数，来控制datetimepicker的显示，具体看官网: http://www.bootcss.com/p/bootstrap-datetimepicker/

3.5K4 0

Bootstrap框架的简单使用

BootStap使用引入Bootstrap为使用该框架必需的第一步，当你完成引入之后，才可以直接使用随后的样式及组件等。...下载完成后将解压后的文件夹放到项目根目录，并在网页中引入BootStrap提供的CSS代码或压缩版的CSS代码： <link rel="stylesheet" href="....CDN引入（推荐） Bootstrap 的 CSS 和 JavaScript 文件提供了 CDN 的支持。直接使用这些 BootstrapCDN 提供的链接即可 <!...内容美化类：按钮只需要给、和元素添加按钮类即可使用Bootstrap提供的样式。.../bootstrap-3.3.7-dist/js/bootstrap.min.js"> 插件使用以下拉菜单为例，你可以直接在插件使用文档里面，复制下拉菜单插件的HTML结构，然后再跳转其相关的结构和内容

3.6K1 0

Bootstrap 面包屑导航（Breadcrumbs）如何操作使用

很简单操作，我来演示面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。...Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。...分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加： .breadcrumb > li + li:before { color: #CCCCCC;

1.7K3 0

bootstrap-dialog插件的使用

官网文档：http://nakupanda.github.io/bootstrap3-dialog BootstrapDialog.show({ message: 'Hi Apple!'...', closable: true, //是否可关的图标 closeByBackdrop: false, //点击空白处是否关掉 closeByKeyboard: false,//使用键盘上的esc键是否关掉...dialogRef.getMessage()); }, onhidden: function(dialogRef){ alert('Dialog is popped down.'); } }); //onshow正在加载的时候触发

1.3K7 0

bootstrap的使用方法「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。...Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺 bootstrap的简单使用 1.通过npm下载bootstrap 2.进入官网的全局css样式 3.选择一个样式实验一下...1.通过npm下载bootstrap 进入项目文件夹下的命令行输入以下命令 npm init -y npm bootstrap@3 引用的方法不尽相同，也可以用别的方法进行引入可参考 https...进入到该页面之后我们就可以看到很多好看的页面样式，我们可以直接copy，然后贴贴到我们的项目中 3.选择一个样式实验一下 bootstrap.min.css"> <div class="form-group

7403 0

表格插件-bootstrap table的使用示例

基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。...官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 1：在官网上下载相关的文件之后，步骤下载之后引入：的css文件 --> bootstrap/css/bootstrap.min.css" rel="stylesheet" /> bootstrap-table...-- 引入的js文件 --> bootstrap/js/bootstrap.min.js...table的分页的实现使用示例

1.8K2 0

Bootstrap Table -detailView和detailFilter的使用

(adsbygoogle = window.adsbygoogle || []).push({});

2.5K3 0

如何使用 Bootstrap class 向按钮添加下拉菜单

如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可。...您也可以使用来指示按钮作为下拉菜单。... 结果如下所示：分割的按钮下拉菜单分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。...分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。... 结果如下所示：按钮下拉菜单的大小您可以使用带有各种大小按钮的下拉菜单：.btn-lg、.btn-sm 或 .btn-xs。

5.6K3 0

如何更高效地定制你的bootstrap

但bootstrap提供的默认样式往往不能满足我们的需求，从而定制化bootstrap成为我们经常需要做的工作，本文就如何更高效更可维护地定制bootstrap做一下探讨。...同时，网上还有很多类似定制bootstrap的网站，如果你不习惯官网的可以去这其它的网站试试，比如Bootswatchr网站使用变量来组织，而StyleBootstrap则使用组件。...custom-other.less: 这个文件中包含了那些无法通过修改变量完成定制的内容，比如增加或禁用button的text-shandow属性。...或custom-other.less会提示缺少变量定义的错误，但这没关系，你只要保证编译custom-bootstrap.less没有错误就可以了。...写于最后：如何更高效的定制bootstrap还有一点需要注意的就是，你要理解bootstrap组织代码的方式以及如果更高效的书写Less。

9941 0

使用bootstrap的栅栏实现五列布局

我们知道，在使用Bootstrap栅格的时候，我们可以对网页方便的进行模块分割。...Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。...它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分，使用col-md-6即可；要3等分，使用col-md-4即可；但如果我们要5等分或者8等分怎么办呢？...下面的示例是bootstrap五等分布局： ?...图片.png Bootstrap 网格系统教程：可以学习和参考一下 http://www.runoob.com/bootstrap/bootstrap-grid-system.html <!

2.8K2 0

Tailwind 与 Bootstrap 的区别和使用入门

它与 Bootstrap 有什么区别？如何在 HTML 页面中使用？学院君将在这篇教程中给大家简单介绍下。...二、与 Bootstrap 有什么区别正如上面所说的，Bootstrap 开箱提供了丰富的布局、组件和样式库，你可以不做任何调整直接拿来使用，这在构建一些内部项目或者验证原型的时候非常方便，但是如果需要定制自定义的样式风格...如果从面向对象编程的角度来看两者的区别，要自定义扩展页面样式，Bootstrap 使用的是继承的方式实现，而 Tailwind 则使用的是组合的方式实现，如果你对面向对象编程有比较深刻的理解，就可以体味到两者各自的优势...三、渲染一个卡片组件下面我们分别通过 Bootstrap 和 Tailwind 框架渲染一个卡片组件，来看看两者实际使用的区别。...使用 Bootstrap 通过 Bootstrap 框架实现非常简单，因为 Bootstrap 内置的组件库提供了卡片组件，直接拿来用就好了： <!

3.6K4 1

按位与& 或| 异或^ 的日常使用

按位与: 0&0=0; 0&1=0; 1&0=0; 1&1=1; 按位或: 0|0=0； 0|1=1； 1|0=1； 1|1=1; 按位异或,在或的基础上1 1也为0:...0^0=0； 0^1=1； 1^0=1； 1^1=0； 1.一个int型字段,存储十进制的数字,比如说是5 那么该数字转成二进制是101,我自己定义从左往右数, 第一位1,代表某功能自动转发开启...第二位0,代表自动删除关闭第三位1,代表自动保存开启 2.判断第三位是否开启自动保存的代码 ($userStatus & pow(2,3-1))!...=0 3.pow是指数表达式函数,2的2次方,转成二进制是0100,按位与0101 & 0100 是0100 十进制为4,因此不等于0为true 4.设置某一位的值,如果要设置为1代码是 $userStatus

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云