热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap是否支持自定义样式调整?

Bootstrap支持用户自定义样式调整。即使长时间未使用Bootstrap,也可以通过添加新的CSS类或覆盖现有类来轻松修改默认样式,以满足特定的设计需求。

更改bootstrap的默认样式

很久没用bootstrap,对与按自己的需求修改样式都忘了。

一上来就添加了新的class类,重写css样式让其覆盖原有的样式,实际上不起作用。因为没考虑的选择器的优先级。面试的时候会问到一些这个问题,一直不能从理论和实践联系起来。

我的解决方案是通过子选择器来增加权重,看别人也有用id的,我不太喜欢添加id的选择器。

回忆一波选择器以及其优先级。

一、css选择器

1.标签选择器(如:body,div,p,ul,li)

2.类选择器(如:class)

3.ID选择器(如:id)

4.全局选择器(如:*号)

5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

8.继承选择器(如:div p,注意两选择器用空格键分开)

9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

11.子选择器 (如:div>p ,带大于号>)

12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)

相关推荐:《bootstrap入门教程》

二、优先级

当在一个样式声明上使用 !important 规则时,该样式声明会覆盖CSS中任何其他的声明,ie6不支持该属性。

内联样式表的权值最高 1000;即在html中给元素标签加style,即内联样式。该方法会造成css难以管理,所以不推荐使用。

ID 选择器的权值为 100;由一个或多个id选择器来定义。例如,#id{margin:0;}id选择器会覆盖类选择器.classname{margin:3pxl}。

Class 类选择器的权值为 10;由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}。

标签选择器权值为 1:由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px;}。

通配符选择器:如*{marigin:6px;}。

浏览器自定义或继承权值为0.1。

总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

三、!important

使用 !important 是一个坏习惯,应该尽量避免,因为这打断了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。

查询的经验:

永远不要在全站范围的 css 上使用 !important。

只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important。

永远不要在你的插件中使用 !important。

要优化考虑使用样式规则的优先级来解决问题而不是 !important。

以上就是bootstrap可以更改样式吗的详细内容,更多请关注其它相关文章!


推荐阅读
  • 网站前端开发的核心理念与必备技能解析 ... [详细]
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 使用React与Ant Design 3.x构建IP地址输入组件
    本文深入探讨了利用React框架结合Ant Design 3.x版本开发IP地址输入组件的方法。通过详细的代码示例,展示了如何高效地创建具备良好用户体验的IP输入框,对于前端开发者而言具有较高的实践指导意义。 ... [详细]
  • LDAP服务器配置与管理
    本文介绍如何通过安装和配置SSSD服务来统一管理用户账户信息,并实现其他系统的登录调用。通过图形化交互界面配置LDAP服务器,确保用户账户信息的集中管理和安全访问。 ... [详细]
  • importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 本指南详细介绍了如何在CentOS 6.6 64位系统上以root用户身份部署Tomcat 8服务器。系统环境为CentOS 6.6 64位,采用源码安装方式。所需软件为apache-tomcat-8.0.23.tar.gz,建议将软件下载至/root/opt目录。具体下载地址请参见官方资源。本指南涵盖了从环境准备到服务启动的完整步骤,适用于需要在该系统环境下搭建高性能Web应用服务器的技术人员。 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 本文介绍了如何使用 CMD 批处理脚本进行文件操作,包括将指定目录下的 PHP 文件重命名为 HTML 文件,并将这些文件复制到另一个目录。 ... [详细]
  • 织梦系统多条件联动筛选功能详细教程及删除操作指南
    多条件联动筛选功能广泛应用于图片展示、装修设计、机械设备和在线商城等场景,通常筛选条件应聚焦于用户最关心的要素,而非涵盖所有可能的选项。在DedeCMS中,多条件筛选的PHP开发并未内置删除已选条件的功能,但通过理解PHP筛选与JS筛选的不同机制,实现这一功能相对简单且易于操作。 ... [详细]
  • 精通jQuery:深入解析事件处理机制与应用技巧
    本文详细探讨了jQuery的事件处理机制及其应用技巧,通过具体的代码示例,逐一解析了每个jQuery代码片段与其对应的HTML结构。文章以标记为基准,CSS作为通用样式,确保每段代码都能独立运行。HTML和CSS代码统一放置在文章末尾,方便读者参考和实践。 ... [详细]
author-avatar
胡鹏锦_289
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有