学习bootstrap04

于 2022-04-19 18:47:46 发布
阅读量63 收藏
点赞数
分类专栏： 前端 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58635769/article/details/124280576
版权

1.引入环境：

  <script src="../lib/jquery-3.2.1.js"></script>
    <link href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>

2.相关解释：

code:代码风格

&lt=<

&gt=>

var:数学表达式风格

kbd:键盘风格

samp:电脑风格

table：声明是一个表格。

table-striped:斑马纹

table-bordered:带边框

table-hover:悬浮背景色改变

table-condensed:更加紧凑的表格

如果要设置成响应式的表格（小设备明显）：

外面放一个div,给上一个table-responsive属性。

<body>
<p class="text-center">
    <code>&lt;head&gt;</code>
    <code>&lt;style&gt;</code>
<pre class="text-center">
    System.out.println("hello world");
</pre>
</p>
<p class="text-center">
    <var>x</var>=<var>ab</var>+<var>y</var><br>
    <kbd>ctrl+L</kbd><br>
    <samp>System.out.println("hello world")</samp>
</p>
<table class="table text-center table-striped table-bordered table-hover table-condensed">
    <caption class="text-center" >喜欢玩的英雄</caption>
    <thead>
    <tr class="success">
    <th class="text-center">名称</th>
    <th class="text-center">类别</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="success">韩信</td>
        <td class="warning">刺客</td>
    </tr>
    <tr>
        <td class="active">花木兰</td>
        <td class="danger">战士</td>
    </tr>
    <tr>
        <td>马可波罗</td>
        <td>射手</td>
    </tr>
    </tbody>
</table>
<div class="table-responsive">
    <table class="table text-center table-striped table-bordered table-hover table-condensed">
        <caption class="text-center" >喜欢玩的英雄</caption>
        <thead>
        <tr class="success">
            <th class="text-center">名称</th>
            <th class="text-center">类别</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="success">韩信</td>
            <td class="warning">刺客</td>
        </tr>
        <tr>
            <td class="active">花木兰</td>
            <td class="danger">战士</td>
        </tr>
        <tr>
            <td>马可波罗</td>
            <td>射手</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

效果图：

 

消白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap4--页面基本设置
zxn200125的博客
12-14 1312
bootstrap中页面排版基本设置和相关css类的介绍
bootstrap4学习
Suxiaomowang的博客
08-26 671
Bootstrap4 导航栏 用.navbar类来创建一个标准的导航栏 .navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 用ul元素并添加class="navbar-nav"类。 然后在li元素上添加.nav-item类，a元素上使用.nav-link类: 删除.navbar-expand-xl|lg|md|sm类来创建垂直导航栏 bg-primary,.bg-success,.bg-info,...
bootstrap 4总结
Belle_Chou的博客
12-17 414
navbar-dark bg-light 实际改变只是text-color，脑回路是这样子的：既然navbar主题是dark，那么相应的text一定是light的。所以如果navbar-light bg-light的话，就全看不见了。 ...
Bootstrap3 与Bootstrap4垂直水平居中
热门推荐
xif3681的博客
07-03 10万+
Bootstrap水平居中 // 文本： class ="text-center" // 图片居中： class = "center-block" //其他元素： //bootstrap3水平居中：利用bootstrap列偏移 class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4" // boots...
text-center 居中显示 (Bootstrap)
海涛高软
01-05 2万+
text-center 实现块元素居中显示 text-right 实现块元素居右显示再举个靠右的例子：FR:海涛高软 （徐海涛）
关于bootstrap-table的使用需要注意的事项
sd1209286540的博客
04-25 655
bootstrap-table的中文api链接:https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&amp;fps=1bootstrap-table的官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/我使用的初始化方式是用的js...
Bootstrap4学习
Suxiaomowang的博客
08-25 844
btn 按钮 btn 按钮没有边框和背景 btn-xxxx 设置按钮背景 btn-outline-primary 设置按钮边框颜色鼠标进入后修改背景颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt.
BootStrap入门案例.zip
10-11
3. **03_BootStrap_CSS样式.html** 和 **04_BootStrap_CSS样式2.html** - 这两个文件涵盖了Bootstrap的基础CSS样式和组件，如按钮、表单、字体、颜色等。Bootstrap预定义了许多样式，使得开发者无需从零开始编写CSS...
04_Bootstrap 3 用户界面架构.rar
09-13
这个“04_Bootstrap 3 用户界面架构.rar”压缩包可能包含了关于如何利用Bootstrap 3来创建高效、美观用户界面的资源。 Bootstrap 3 的核心特性包括预定义的CSS样式、JavaScript组件和可定制的LESS代码。以下是一些...
03-04-05-揭开BootStrap的神秘面纱1
08-04
【标题】：“03-04-05-揭开BootStrap的神秘面纱1”主要探讨了Netty框架中的BootStrap组件及其在实现高性能网络通信中的作用。本章节旨在帮助读者深入理解Netty的运行机制，特别是NioEventLoop、Pipeline、ByteBuf的...
Bootstrap.视频教程
02-23
`bootstrap-02-04-把已有的固定宽度布局转换成响应式布局.mp4` 解释了如何将传统的固定宽度设计转变为适应各种设备屏幕大小的响应式布局。Bootstrap提供了一系列断点（如 `.col-sm-`, `.col-md-`, `.col-lg-` 等）来...
Bootstrap基本组件学习笔记之按钮组(8)
09-01
### 0x04 嵌套下拉菜单 Bootstrap按钮组还可以与下拉菜单结合使用，创建复杂的交互式组件。以下是一个按钮组中包含下拉菜单的例子： ```html 按钮1 下拉菜单 <span class="caret"></span> <li><a href=...
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
最新发布
07-27
1250KVA本体基础图11
毕业设计之网上订餐系统.zip
07-27
毕业设计之网上订餐系统.zip
pillow-10.4.0-cp39-cp39-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp39-cp39-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
Bootstrap前端框架学习详解
"Bootstrap学习笔记" Bootstrap是一个流行的开源前端框架，由Twitter开发并维护，它提供了丰富的组件和样式，帮助开发者快速构建响应式和移动优先的网页。这个学习笔记涵盖了Bootstrap的基础知识和关键特性，适合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

消白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值