Bootstrap可以设置全局CSS样式,基本的HTML元素均可以通过在Bootstrap框架中对class设置样式,以达到想要的效果。
在每一个CSS文件中,都包含相应的标签设置:
上图中是4.0.0版本的的body标签设置。
Bootstrap将全局文字大小设置为1rem,行高设置为1.5,文本默认颜色被设置为#212529。
下面用例子来说明CSS应用。新建index.html文件并输入下列内容:
<html><head lang="en"><meta charset="UTF-8"><title> bootstrap全局CSStitle><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">head><body><br class="container"> <h1>新闻标题1h1> <h2>新闻标题1h2> <h3>新闻标题1h3> <h4>新闻标题1<small>欢迎你的到来small>h4> <p class="lead">测试数据p> <del>被删除元素del>br> <mark>被加了背景mark> <p class="text-left">文字居左p> <p class="text-right">文字居右p> <p class="text-center">文字居中p> <ul class="list-unstyled"> <li>新闻1li> <li>新闻2li> <li>新闻3li> ul> <div class="lead"> 文字高亮显示 div>div>body>html>
上面的代码中12~15行是在Bootstrap中定义h1~h4标题,在标题内还可以包含标签或赋予.small类的元素,可以用来标记副标题;
16行通过添加.lead类让段落突出显示;
17行代码使用标签标记了被删除的文本;
18行通过添加标签为元素添加背景颜色并高亮显示文本;
19~21行通过文本对齐类text-left、text-right和text-center,简单方便地将文字重新对齐;
22~26行设置了无序号列表,并使用方法;
27~29行通过将文字高亮显示。
打开index.html文件,可以看到body标签内文本按设置的要求显示:
从上面的例子可以看出,Bootstrap帮我们设置好了CSS样式,我们写代码时不需要单独写CSS代码。
除了全局CSS样式外,Bootstrap还内置了栅格系统,下一节我们将进行详细讲解,感兴趣的小伙伴可以持续关注~
你确定不关注我一波?!