bootstrap学习笔记初探(1)
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器。我们提供了两个作此用处的类。注意,由于
padding
等属性的原因,这两种 容器类不能互相嵌套。
“行(row)”必须包含在 .container
(固定宽度)或 .container-fluid
(100% 宽度,流式布局)中,你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
媒体查询:@media(){……}
实例:@media (min-width:@screen-sm-min)and(max-width:@screen-sm-max){...
}
@screen-sm/md/lg-min;@screen-sm/md/lg-max;
针对超小屏幕和中等屏幕设备所定义的类:
.col-xs-*
和.col-md-*
列偏移:
使用 .col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用*
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将.col-md-4
元素向右侧偏移了4个列(column)的宽度。
在标题内还可以包含<small>
标签或赋予 .small
类的元素,可以用来标记副标题。单独使用<small>标签则为缩小字体。
全局属性:font-size:14px,line-height(行间距):1.428;这些属性直接赋予 <body>
元素和所有段落元素。另外,<p>
(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
通过添加 .lead
类可以让段落突出显示。对于被删除的文本使用 <del>(等同于<s>)
标签。
额外插入的文本使用 <ins>
标签;为文本添加下划线,使用 <u>
标签。
通过增加 font-weight 值强调一段文本.
注释:font-weight的值:normal(默认标准字符)、bold(粗体字符)、bolder(更粗的字符)、lighter(更细的字符).数值:100~900(没有单位,400等同normal,700等同bold)、inherit(从父元素继承)
在 HTML5 中可以放心使用 <b>
和 <i>
标签。<b>
用于高亮单词或短语,不带有任何着重的意味;而<i>
标签主要用于发言、技术词汇等。
<em>使字体倾斜以强调一段文本。
文本对齐类:text-left,text-center,text-right,text-justify(使文本齐行,设定文本对齐,段落中超出屏幕部分文字自动换行),text-nowrap{段落中超出屏幕部分不换行}.
通过类改变字体大小写:text-lowercase,text-uppercase,text-capitalize(单词首字母大写).
<abbr>
缩略词,实例<abbr title="attribute"></abbr>
首字母缩略语:为缩略语添加 .initialism
类,可以让 font-size 变得稍微小些。
<address></address>地址标签
将任何 html 元素包裹在
<blockquote>
中即可表现为引用样式。对于直接引用,我们建议用 <p>
标签(如需把页面作为 strict XHTML 进行验证,那么 <blockquote> 元素必须包含块级元素,比如<p>).
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现