使用bootstrap进行页面设计第一步

    xiaoxiao2021-12-14  19

         Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。     入门bootstrap非常简单,官网都有详细的介绍,后续查看一下api。不用刻意去背去记,需要的就去api查找就好。

       一、下载bootstrap包

                网址: bootsrap官网

                             中文官网

      

           在打开的download页面中,选择下载红框部分的文件就可以使用了,该文件上为 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。蓝框部分包含bootstrap的源码。我们这里只下载红框部分的文件

          下载了文件解压之后,就会发现包含以下类型的文件夹:

          

         文件夹里面有对应的文件,分别有非压缩版本和压缩版本:

        

        我们在这里使用非压缩版本,以便后续查看。

    二、配置和使用

           1、首先我们创建一个项目。把我们需要用的bootstrap文件放入对应的目录节点,如下所示:

                  

                   其中的jQuery文件时另外下载的。

            2、在index.html引入文件。

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>bootstrap</title> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-theme.css"> </head> <body> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>

         注意:

                 1)、要加上    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">                                        <meta name="viewport" content="width=device-width, initial-scale=1.0">这两句。

                                           第一句针对在ie下,让IE提供最新的渲染方式

                                           第二句让移动端适配尺寸。

                 2)、jquery-3.1.1.min.js文件一定要在文件bootstrap.js引用前引用。

           

        

           

    转载请注明原文地址: https://ju.6miu.com/read-962139.html

    最新回复(0)