2016 - 2025

感恩一路有你

bootstrap使用教程 bootstrap的用途是什么?

浏览量:2576 时间:2021-03-13 20:56:49 作者:admin

bootstrap的用途是什么?

原始的网页设计出来的页面太丑了,所以有些人把前端简单的封装了一下,让我们写出来的页面更加漂亮。Bootstrap的作用就是这样的,在没有美工的前提下也可以设计出漂亮的前端页面。

为什么修改了bootstrap的css文件自定义的样式不起作用?

  bootstrap已经作为前端开发必不可少的框架之一,应用bootstrap使得我们对布局、样式的设定变得非常简单。

  但bootstrap提供的默认样式往往不能满足我们的需求,从而定制化bootstrap成为我们经常需要做的工作,本文就如何更高效更可维护地定制bootstrap做一下探讨。     如下图,在你的button 中加入bootstrap的class: btn btn-primary,就可以将默认的button(左边)变成右边的样式。  可如果我们想应用自己的样式呢看比如我们想要拥有圆角的button。  通常,我们可以直接覆盖bootstrap的样式。  我们在自己的项目目录下新建my-custom.css文件,加入如下代码:   .btn { -webkit-border-radius: 20px -moz-border-radius: 20px border-radius: 20px}      将my-custom.css文件引用放到bootstrap.css文件后面,我们定义的btn样式就会覆盖原有的样式(注:这里的‘覆盖’指的是增量叠加式的覆盖)。       但这种方法有它的优缺点,   优点:不会改变你的工作流程。你可以快速直接修改你的样式,即使是你的网站引用了其他的类似bootstrap的框架样式,你都可以在同一个地方进行统一的定制。  缺点:但是对于更彻底的修改(比如重新设计导航栏)或是非局部的修改(比如修改适用于整个网站的高亮颜色)来说,这样东一块,西一块的覆盖样式更像是一种打补丁式的解决方案。而且你的新样式要添加到Bootstrap的默认样式表里,让本已经100 KB的文件越发臃肿。如果你不仅仅想要做一些覆盖,那就要考虑一种更具扩展性的方法了。  另一种方法是生成一个自定义构建的bootstrap。  我们可以使用官方的构建器,你可以对bootstrap中样式变量进行自定义。如下图所示:

bootstrap使用教程 bootstrap显著性检验 bootstrap字体颜色

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。