bootstrap怎么写样式( 三 )


可如果我们想应用自己的样式呢?比如我们想要拥有圆角的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中样式变量进行自定义 。如下图所示:
8.bootstrap怎么才可以记住class里的样式一、字体排版Typography
:一般是斜体,在bootstrap中为正体,对比如下:
图1 bootstrap
图2nobootstrap
还有、之类,此部分简单跳过
:bootstrap提供了左对齐效果
二、code
多个code元素如果要排版,可以用
来包裹,因为pre 元素可定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符而文本也会呈现为等宽字体 。
【bootstrap怎么写样式】

bootstrap怎么写样式

文章插图