前端开发必知的Bootstrap样式整理

Bootstrap是前端开发中非常重要、经常使用的一个开发框架,对于这个框架,它有哪些样式呢?今天为大家分享的就是Bootstrap的一些常用样式,希望可以帮助大家更好的学习bootstrap

.sr-only { clip: rect(0, 0, 0, 0); } : .sr-only 这个类主要为了增强网站的无障碍性(可访问性)。假设在一个导航栏的 DOM 结构的主要内容之前,有很多超链接,可以使用 .sr-only 类在视觉上隐藏掉这些超链接。也就是说,为了保证视力障碍用户对网站的正常使用,通常需要在导航栏的主体内容之前,增加一些网页阅读器(朗读器)能够很好识别的内容和结构,以提高视力障碍者对网站结构的理解,而这些内容,恰恰是视力正常用户所不需要的,所以可以使用 .sr-only 类在视觉上隐藏掉这些内容,仅供网页阅读器(朗读器)正常辨别即可。语句 clip: rect(0, 0, 0, 0); 用于隐藏添加了 .sr-only 类的 label 标签。

.sr-only-focusable 类:确保一旦超链接被 :focus 或者 :active 了,也就是超链接被激活了,就会在视觉上可见。用于照顾使用键盘进行网页导航的用户,也是增强网站的无障碍性(可访问性)的手段之一。

white-space: nowrap; 语句:描述了如何处理空格(包括换行符、空格和制表符),详情见下图:

border-collapse: collapse; :为表格设置合并边框。

text-overflow: ellipsis; white-space: nowrap; :组合起来意思就是:超出盒模型宽度的段落不换行,并以 ... 显示。

cursor: help; :鼠标指针变成 帮助 图标。

box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); :盒模型内阴影,向右偏移 0px,向上偏移 1px,阴影扩展 0px,背景色为不透明度 75% 的黑色。

word-break: break-all; : word-break 属性主要用于设置拉丁字符(英文、拉丁文等)与非拉丁字符(也就是 CJK,Chinese、Japanese、Korean,中文、日文、韩文)之间的换行规则。 word-break 使得换行可以发生在任意两个字符之间;此选型更多地用于大篇幅非拉丁字符与少量拉丁字符组成的元素中,以便文字更好地分布。也就是说:如果元素内有大量英文,不建议使用这个选项,因为有很大几率会在一个英文单词的某两个字母中进行段落换行。这对于拉丁字符而言,是一个很糟糕的体验(因为拉丁字符的换行通常发生在音节、空格处)。

W3C 规范中关于 word-break 属性的解读: word-break-property

word-wrap: break-word; : word-wrap 是旧标准的遗留产物,新标准中的属性叫overflow-wrap 。 word-wrap 属性用于规定当一长串不可换行/断句的字符串由于太长,不能放入一个给定宽度的容器内时,用户代理(浏览器)是否可以在一个单词的内部进行断句以避免产生字符溢出。只有 white-space 设置为允许 wrapping 时, word-wrap 才会生效。

一般而言, word-break: break-all; 和 word-break: break-all; 会一起使用。

touch-action: manipulation; : touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如划动、缩放等)。 manipulation :浏览器只允许进行滚动和持续缩放操作,任何其它被auto值支持的行为不被支持。

background-clip: padding-box; : background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面。 padding-box :边框下面没有背景,即背景延伸到内边距外沿。

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) 选择器:选择的是 .btn-group 的直接 .btn 子类,它不能是 .btn-group 下的第一个 .btn ,也不能是最后一个 .btn ,同时不带有 .dropdown-toggle 类。由此可见,CSS 伪元素或者伪类可以通过 连写的方式 来进行条件式选择/排除。

table-layout: fixed; : table-layout 属性定义了表格布局算法,用于对表格中单元格、行和列进行布局。 fixed 选型定义了:表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定。在当前列中,该单元格所在行之后的行并不会影响整个列宽。

:empty 伪类选择器:匹配没有任何子元素(包括 text 节点)的元素。

text-align: start; :一个实验性质的语句。如果内容方向是从左至右,则等于text-align: left; ,反之则为 text-align: right; 。

文章来源:前端养成记

时间: 2024-10-20 09:34:16

前端开发必知的Bootstrap样式整理的相关文章

前端开发必知的7大技能

随着互联网快速成为日常工作生活的一部分,对于从事互联网的职业也有了更加清晰的定位:设计, 前端开发 ,后端,编辑,运营等等. 随着互联网快速成为日常工作生活的一部分,对于从事互联网的职业也有了更加清晰的定位:设计,前端开发,后端,编辑,运营等等.在这里我们以前端开发的人员的角度来看看应该掌握哪些技能. 大部分人会很自然地认为" 页面的开发没什么技术含量,很简单 " .不仅有这种普遍的认知,对从业者来说也有很多疑惑:做页面前端实现,没问题:兼容性,小 case :图片集成,一直都在用 -

前端开发必知必会:CSS Position 全解析

当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来. CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细

移动前端开发者必知必会:移动设备概述

由于工作岗位的变换带来工作内容的变动,对于移动站点的前端开发已经疏远了好几个月,在这好几个月中有非常多新的东西出现,自己所掌握的一些东西也已经陈旧,所以选择了这本书<HTML5触摸界面设计与开发>来系统地学习和整理一下关于移动站点前端开发的知识体系. 之所以选择这本书,一是由于这本书比較新,2014年04月发的第一版.其二是由于作者Stephen Woods,这是Flickr团队的资深前端,Yahoo主页的Javascript技术平台正是出自此人之手. 接下来的时间里会陆续上传关于这本书学习的

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师,学习设计模式是对自己工作经验的另一种方式的总结和反思,也是开发高质量,高可维护性,可扩展性代码的重要手段. 我们所熟知的金典的几大框架,比如jquery, react, vue内部也大量应用了设计模式, 比如观察

.NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上下文环境检查(实战)

Microsoft.NET 解决方案,项目开发必知必会. 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术点,所以我称为必知必会.尽管这一些列是使用.NET/C#来展现,但是同样适用于其他类似的OO技术平台,这些技术点可能称不上完整的技术,但是它是经验的总结,是掉过多少坑之后的觉醒,所以有必要花几分钟时间记住它,在真实的项目开发中你就知道是多么的有帮助.好了,废话不说了,进入主题. 我们在开发服务时为了调试方便会在本地进行一个基本的模块测试,你也可以认为是集

iphone开发必知点之--app本地化

iphone开发必知点之--app本地化 1.在自定Resources目录的localizables右键,选New file, 然后选Resource想的Strings File文件 点next,文件名定义为“Localizable.strings”,选择自己要保存的目录,创建 2.选中Localizable.strings文件 在右侧的工具面板点击“+”号键,分别添加English和Chinese,如图 此时左侧的目录结构会变成 系统对应的目录会生成两个对应的英文en.lproj和中文zh-H

《安卓开发必知的50个技巧》读书笔记

记录一下看<安卓开发必知的50个技巧>觉得有用的一下技巧. include标签使用注意事项 如果想在标签中覆盖被包含布局所指定的任何android:layout_*属性,必须在标签中同时指定android:layout_width和android:layout_height属性,我们可以通过指定被包含布局的layout_width和layout_height属性都为0dp,这样做的目的是由被包含布局的使用者在标签中指定layout_width和layout_height属性,如果使用者不指定这

前端开发必须知道的JS之闭包及应用

本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教. 在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了.本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教. 一. 闭包的理论 首先必须了解以下几个概念: 执行环境 每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执行环境.函数总是在自己的执行

web前端开发必看的14本书!

第一阶段:HTML和CSS的学习 HTML就不多说了,基础中的基础,这个都不会的小伙伴请参见HTML手册,认真学习W3C课程,稍有基础之后可以跟着视频学习<HTML+CSS基础课程>. 欧克!荐书开始! 1.<CSS权威指南>第三版 这本书实在太适合小白用户了,是一本为初学者清扫障碍的书籍.同行一致认为这本书是学习CSS基础的首选.CSS界权威Meyer大师的作品,翻译水平也灰常赞! 2.<CSS那些事儿> 住邦2000写字楼出租众合鑫房产 热门商圈楼盘出租,设施齐全,