活动1:采用css样式来设置背景、标题和段落的颜色。_Flask干货:Bootstrap的基本使用——全局CSS样式...

4d77ae977972f9e092d89d6aa721cfe9.png

3a495fcba94bf49d382955e2716b4729.png

图 | 源网络 文 | 5号程序员

Bootstrap可以设置全局CSS样式,基本的HTML元素均可以通过在Bootstrap框架中对class设置样式,以达到想要的效果。

在每一个CSS文件中,都包含相应的标签设置:

80ad2c3f19ddfdc794d461a0a497019a.png

上图中是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标签内文本按设置的要求显示:

7fe6ae013232480da4fdfa85bcf8f6b6.png

从上面的例子可以看出,Bootstrap帮我们设置好了CSS样式,我们写代码时不需要单独写CSS代码。

除了全局CSS样式外,Bootstrap还内置了栅格系统,下一节我们将进行详细讲解,感兴趣的小伙伴可以持续关注~

你确定不关注我一波?!

defc6dfb408727df1c082094d35c529a.png

- END -

23225c6120f3f332803ad61e30426155.png

d22c7a086edde2a9d60e7121c15cb3d0.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值