欢迎光临
我们一直在努力

Bootstrap教程:全局样式

在制作Web页面时,前端人员都习惯为网站设置一个全局样式(reset.css)。那么在Bootstrap框架中也不例外。Bootstrap框架的核心是轻量的CSS基础代码库,他并没有一味的重置样式,而是注重各浏览器基础表现,降低开发难度。大部分前端人员都具有归零的思想,但实际你会发现,归零之后的样式在开发过程中会存在着潜在的问题,例如,在全局样式表中将em变成一个普通标记,明明应该是斜体,为什么就没效果了呢?

Bootstrap框架在这一部分做了一定的变更,不再一味追求归零,而是更注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下:

1、移除body的margin声明

2、设置body的背景色为白色

3、 为排版设置了基本的字体、字号和行高

4、设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式

大家可以单击查看右侧“style.css”文件,来查看上面所说的全局样式(这个是从下载的boostrap.css中摘取出来的)。

其实Bootstrap的全局样式采用了“normalize.css”,但并没有一味的全部使用此重置样式,而是在此基础上进行了一些改良,让其更适合Bootstrap的设计思想。

你可以通过“normalize.less”(LESS版本)或“_normalize.scss”(Sass版本)进行深入的了解。

Bootstrap教程

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全局样式</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>

<body>

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a href="#" >Learn more ?</a></p>
      </div>
    
</body>
</html>

 

赞(0) 打赏
未经允许不得转载:新起点博客 » Bootstrap教程:全局样式

评论 抢沙发

评论前必须登录!