bootstrap 实现吸顶效果_BootStrap从基础到项目实战_第1季_03章_03_全局CSS之排版

最新推荐文章于 2021-12-20 17:45:00 发布
最新推荐文章于 2021-12-20 17:45:00 发布
阅读量108 收藏
点赞数
文章标签： bootstrap 实现吸顶效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39920403/article/details/111686356
版权
380b10f02eefb7eb24fd7d3edf79bcb1.png

2.1、标题

Html中的所有标题标签，从

到

均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。

示例代码：

标题

h1.响应式布局-BootStrap从基础到项目实战

h2.响应式布局-BootStrap从基础到项目实战

h3.响应式布局-BootStrap从基础到项目实战

h4.响应式布局-BootStrap从基础到项目实战
h5.响应式布局-BootStrap从基础到项目实战
h6.响应式布局-BootStrap从基础到项目实战

效果：

243b29b3736394292c0da2b05480f174.png

在标题内还可以包含标签或.small元素，可以用来标记副标题。

示例代码：

标题

h1.响应式布局-BootStrap从基础到项目实战

h2.响应式布局-BootStrap从基础到项目实战

h3.响应式布局-BootStrap从基础到项目实战

h4.响应式布局-BootStrap从基础到项目实战
h5.响应式布局-BootStrap从基础到项目实战
h6.响应式布局-BootStrap从基础到项目实战

效果如下：

2.2、页面主体

Bootstrap将全局font-size设置为14px，line-height为1.428 。这些属性直接赋给

和所有段落元素。另外，

(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)。

示例代码：

页面主体

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

效果如下：

通过添加.lead可以让段落突出显示。

示例代码：

Lead Body Copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

效果如下：

通过和上面页面主体的对比就可以看到明显的效果了

2.3、强调

直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。

1.小号文本

对于不需要强调的inline或block类型的文本，使用标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的元素被设置不同的font-size。你还可以为行内元素赋予.small以代替任何标签。

代码如下：

This line of text is meant to be treated as fine print.

2.着重

通过增加font-weight强调一段文本。

rendered as bold text

3. 斜体

用斜体强调一段文本。

rendered as italicized text

4. 对齐class

通过文本对齐class，可以简单方便的将文字重新对齐。

Left aligned text.

Center aligned text.

Right aligned text.

很明显第一行左对齐，第二行居中，第三行右对齐。

示例代码：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum necessitatibus inventore voluptatum, rem ducimus eos saepe hic error fuga delectus officia veniam deleniti magnam labore repellendus asperiores aliquid consectetur architecto.

Left aligned text.

Center aligned text.

Right aligned text.

效果：

5.强调class

这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。

代码如下：

强调Class

Maecenas sed diam eget risus varius blandit sit amet non magna.

Maecenas sed diam eget risus varius blandit sit amet non magna.

.Maecenas sed diam eget risus varius blandit sit amet non magna.

Maecenas sed diam eget risus varius blandit sit amet non magna..

Maecenas sed diam eget risus varius blandit sit amet non magna..

.Maecenas sed diam eget risus varius blandit sit amet non magna.

效果如下：

2.4、缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有"问号"的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

基本缩略语

如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

attr

效果：

Initialism

为缩略语添加.initialism可以将其font-size设置的更大些，更加突出强调。

HTML

效果：

2.5、地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加
可以保留需要的样式。

Twitter, Inc.

795 Folsom Ave, Suite 600

San Francisco, CA 94107

P: (123) 456-7890

Full Name

first.last@example.com

效果如下：

2.6、引用

在你的文档中引用其他来源的内容。

默认样式的引用

将任何HTML裹在

之中即可表现为引用。对于直接引用，我们建议用

标签。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

引用选项

对于标准样式的

，可以通过几个简单的变体就能改变风格和内容。

命名来源 : 添加标签来注明引用来源。来源名称可以放在标签里面。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

效果如下：

另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

效果：

向右对齐移动了，当然也有相应的pull-left。

2.7、列表

无序列表

顺序无关紧要的一列元素。

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

这个也很明显和Html的一样。

这个也很明显和Html的一样。

有序列表

顺序至关重要的一组元素。

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet
  5. Lorem ipsum dolor sit amet

同理有序列表。

无样式列表

移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

内联列表

通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

效果当然就是在一行了。

2.8、描述

带有描述的短语列表

.Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet

这标签在Html当中也是存在的。

水平排列的描述

.dl-horizontal可以让

.Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet

小结

最后补充再补充一个知识点，也许有些情况还是用的到的额。

内联代码：在正文中通过标签包裹内联样式的代码片段。

For example, should be wrapped as inline.

简单的效果

基本代码快：多行代码可以使用

标签。为了正确的展示代码，注意将尖括号做转义处理。

Sample text here...

简单效果

还可以使用.pre-scrollable class，其作用是设置max-height为350px，并在垂直方向展示滚动条。

示例代码：

Lorem ipsum dolor sit amet,

Sample text here...

, consectetur adipisicing elit. Hic ratione quos ullam voluptas id non atque, dignissimos aut in eligendi officiis, eius laborum deserunt optio veritatis dolorum eveniet ipsam inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam repellat nesciunt beatae id, consequuntur, nostrum delectus deleniti velit voluptate voluptatibus sit quasi architecto dignissimos repudiandae quaerat, fugit ullam facere dolorum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus quia laboriosam, praesentium modi hic est. Tenetur modi doloribus deleniti, quia voluptatem rerum, provident eligendi, cum totam necessitatibus aliquid placeat.

效果：

8800ae7d023b66c32210a3fb54f35628.png
weixin_39920403
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习之Bootstrap学习
weixin_30349597的博客
06-29 406
一，Bootstrap简介 　　在前端世界，有个叫Bootstrap的家伙，，是twitter 开源出来的一套前端框架，利用Ta可以快速开发网站界面，它的特点就是比自己从头写简单，直观，方便，快捷，省劲。 　　凡是使用过Bootstrap的开发者，都不在乎做这么两件事情：复制and粘贴。哈哈~，是的使用Bootstrap非常简单，但是在复制粘贴之前，需要先对Bootstrap的用法一一熟悉之后...
看完了 2021 CSS 年度报告，我学到了啥？
前端劝退师
12-21 266
大家好，我是 ConardLi，一年一度的 CSS年度报告 如期而至，我挑了一些我感兴趣的部分，和我一起来看看吧～这篇文章用了很久，因为平时 CSS 写的实在少，其实看报告的主要目的除了了...
less 经典范例 bootstrap 的 less 版本 常用 less 代码
weixin_30790841的博客
07-28 225
1.bootstrap 的 less 版本 2.less 文件分布 /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/ma...
看完 2021 CSS 年度报告，才知道 CSS 发展这么快
小生方勤
12-20 508
大家好，我是 小生方勤，一年一度的 CSS年度报告 如期而至，我挑了一些我感兴趣的部分，和我一起来看看吧～这篇文章用了很久，因为平时 CSS 写的实在少，其实看报告的主要目的除了了解CSS...
前端工程师自检清单（二）
寒蝉的小聒噪的博客
07-04 1811
二、HTML和CSS HTML 从规范的角度理解HTML，从分类和语义的角度使用标签 Html的标签分很多种：1.head里面的元信息标签 2.img、video、audio等替换型媒体标签 3.语义类标签 《重学前端》 HTML语义 常用页面标签的默认样式、自带属性、不同浏览器的差异、处理浏览器兼...
web移动开发总结(一)
热门推荐
庚中
12-02 1万+
概述 移动web的概念和发展历史 移动web的开发方式和区别 响应式原理和媒体查询(重点) 响应式框架的介绍 bootstrap框架的基本使用 bootstrap全局CSS样式布局容器使用(重点) bootstrap全局CSS样式栅格系统使用(重点) bootstrap全局CSS样式响应式工具使用 微金所项目搭建和头部的结构 (重点) web前端 PC端的web ： 在PC端电脑访问的web...
响应式布局开发
weixin_33800593的博客
01-29 215
目录 移动web介绍和两种开发方式(响应式开发方式 原生的开发方式) 响应式的原理(CSS3的媒体查询) 响应式开发框架(Bootstrap) 的介绍和基本信息-优势-版本 了解框架和库的区别 主导者不一样 入门Bootstrap 起步 下载和引包 阅读Bootstrap的文档 了解常用的全局CSS样式 和 组件 和JS插件 搭建项目目...
bootstrap所需jar包.zip_CIRF_bootstrap jar_bootstrap.css jar_fonts最新
09-21
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，用于快速构建响应式、移动优先的网站。在给定的压缩包文件“bootstrap所需jar包.zip”中，包含的是Bootstrap框架在Java环境下的应用...
bootstrap.zip_bootstrap_bootstrap matlab_bootstrap抽样_bootstrap重抽
07-14
1. **生成Bootstrap样本**：从原始数据集中随机抽取样本，且允许重复抽样，形成一个与原数据集大小相同的新样本，这一过程称为一次Bootstrap抽样。 2. **计算统计量**：对每个Bootstrap样本计算感兴趣的统计量，如...
linux-dash-master.zip_DEMO_bootstrap php_bootstrap项目_监控linux
09-20
LinuxDash是一款基于bootstrap和PHP的服务器信息监控程序。 Demo:http://afaq.dreamhosters.com/linux-dash/ 项目地址:https://github.com/afaqurk/linux-dash
Tema2_HTML5_CSS3源码_bootstrap_
10-01
标题“Tema2_HTML5_CSS3源码_bootstrap_”暗示了这是一个使用HTML5和CSS3技术，并结合Bootstrap框架来构建的网页项目。在这个项目中，开发者可能已经创建了一个具有基本结构和样式的网页模板，即“Tema2”。 HTML5...
bootstrap tab.zip_bootstrap tab_bootstrap tab_bootstrap 多tab_bo
09-15
Bootstrap 框架是网页开发中的一个流行工具，它提供了丰富的预定义样式、组件和JavaScript插件，大大简化了响应式网页设计的工作。在给定的压缩包 "bootstrap tab.zip" 中，我们可以看到一系列与Bootstrap选项卡...
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从基础到项目实战_第1季_03章_02_CSS样式栅格系统实例...
06-02
可以使用Bootstrap的栅格系统来根据不同屏幕尺寸写样式。栅格系统是一种基于12列网格的布局系统，可以根据不同屏幕尺寸来调整列的宽度。 具体来说，可以使用以下类来定义不同屏幕尺寸下的样式： - `.col-*`：用于所有屏幕尺寸，*表示列占据的宽度，取值为1~12。 - `.col-sm-*`：用于小屏幕设备（≥576px），*表示列占据的宽度，取值为1~12。 - `.col-md-*`：用于中等屏幕设备（≥768px），*表示列占据的宽度，取值为1~12。 - `.col-lg-*`：用于大屏幕设备（≥992px），*表示列占据的宽度，取值为1~12。 - `.col-xl-*`：用于超大屏幕设备（≥1200px），*表示列占据的宽度，取值为1~12。 例如，如果要在小屏幕设备上将一个元素的宽度设置为6列，可以这样写： ``` <div class="col-sm-6"></div> ``` 如果要在所有屏幕尺寸上将一个元素的宽度设置为12列，可以这样写： ``` <div class="col-12"></div> ``` 通过使用栅格系统，可以轻松地实现响应式布局，并根据不同屏幕尺寸来调整样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值