欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用Bootstrap Studio创建一个简单的自适应页面

程序员文章站 2022-06-09 21:24:24
Bootstrap Studio是一个可视化Bootstrap开发工具。在Bootstrap Studio中创建一个页面,在这个页面中包含一个容器,在容器中放进一行,在行中放进三列,三列分别显示“我是第一列”,“我是第二列”,“我是第三列”。要求页面能够自适应不同大小的屏幕。操作步骤:在Design面板中,右击分组标签Pages,然后点击“Create Page”。在Studio面板中拖拉组件Container到设计工作区。在Studio面板中拖拉组件Row到设计工作区的Empty....

Bootstrap Studio是一个可视化Bootstrap开发工具。 

在Bootstrap Studio中创建一个页面,在这个页面中包含一个容器,在容器中放进一行,在行中放进三列,三列分别显示“我是第一列”,“我是第二列”,“我是第三列”。要求页面能够自适应不同大小的屏幕。

用Bootstrap Studio创建一个简单的自适应页面

操作步骤:

  1. 在Design面板中,右击分组标签Pages,然后点击“Create Page”。
  2. 在Studio面板中拖拉组件Container到设计工作区。
  3. 在Studio面板中拖拉组件Row到设计工作区的Empty  Container中。
  4. 在Studio面板中拖拉组件Column到设计工作区的Empty  Row中。
  5. 在Empty Column的ATTRIBUTES面板中,在Class Names文本框输入bg-primary
  6. 在Options面板中将Width修改为4。
  7. 在Studio面板中拖拉组件Paragraph到设计工作区的Empty  Column中。
  8. 将组件Paragraph的文本修改为“我是第一列”。
  9. 右击组件Paragraph,然后点击Duplicate,并将复制后的组件Paragraph的文本修改为“我是第二列”。同样地,复制得到第三列。第二列、第三列的Class Names属性修改分别包含bg-secondary、bg-success。
  10. 依次点击设计工作区右上角的屏幕大小图标,发现文本的位置不是居中。
  11. 选定组件Paragraph,在Options面板中,修改对齐方式Alignment为居中(Center)。
  12. 重复第10步,现在文本的位置是居中了。但是,网格的作用是什么呢?
  13. 选定组件Column,我们发现,三个列组件的Class Names属性都包含col-4,并且加锁了。
  14. 在Overview面板中,选定Column,然后点击“Convert to HTML”。Overview面板中的Column变成了Custom Code。对三个组件Column执行相同的操作。
  15. 双击Custom Code,将其中的col-4修改为col-md-4。然后点击Custom Code代码编辑框工具栏中的“Apply”。对三个组件Custom Code执行相同的操作。
  16. 重复第10步,现在注意到网格的作用了。
  17. 点击Bootstrap Studio主工具栏中的Export,我们将得到如下的代码:

 

<!DOCTYPE html>

<html>

 

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <title>Test</title>

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="assets/css/styles.css">

</head>

 

<body class="text-nowrap">

    <div class="container">

        <div class="row">

                        <div class="col-md-4 bg-primary">

                                 <p class="text-center">我是第一列</p>

                        </div>

                        <div class="col-md-4 bg-secondary">

                                 <p class="text-center">我是第二列</p>

                        </div>

                        <div class="col-md-4 bg-success">

                                 <p class="text-center">我是第三列</p>

                        </div>

              </div>

    </div>

    <script src="assets/js/jquery.min.js"></script>

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</body>

 

</html>

本文地址:https://blog.csdn.net/kevingao/article/details/107896529