安装Bootstarp的示例

这篇文章给大家分享的是有关安装Bootstarp的示例的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

陵城网站建设公司创新互联建站,陵城网站设计制作，有大型网站制作公司丰富经验。已为陵城成百上千提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的陵城做网站的公司定做！

一、安装

首先打开Bootstarp的官网：https://v3.bootcss.com

下载完成后，解压压缩包，把解压后的文件导入pycham中

在HTML页面中的style中导入bootstrap的css文件和js文件，建议导入min.css，体积更小

以我的文件路径为例：

安装完成

二.更改pycharm的默认HTML页面(可跳过)

在pycharm中创建一个新的HTML页面，如果还想使用Bootstarp，只能重新导入上述路径

为了避免重复的工作，可以更改默认的HTML模板

1.打开setting，找到下面选项

2.找到HTML文件

3.更改右边的代码

更改模板完成

三.Bootstarp的使用：

1.栅格系统

Bootstarp的重要特性：栅格系统

官方的解释可以看官网：https://v3.bootcss.com/css/#grid

个人理解就是：在一个container的容器内，被行分隔,每一行分为12个单位的长度

//简单的模型

      
 
      
 
      
 

简单的测试一下：

//c1中没有设置宽度，只设置了div的高度

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
        
11
        
12
        
13
    

 .c1{
            height: 50px;
            background-color: red;
            border: 1px black solid
        }

c1的样式

可以看到一个container容器被分为12份，这是因为设置了col-lg-1的原因，该类可以从col-lg-1设置到col-lg-12，

    

        
1
        
2
        
3
        
4

    

效果如下：

还有重要的一点：

每一行的每一个列还可以继续切分

效果如下：

做的比较丑，勿怪。。

代码：

    

       //在这个div里面进行切分
        

            

            

             

        
       //结束
        
2
        
3
        
4

    

2.组件和各种控件的获取：

1.通过官网的复制粘贴获取：( ･´ω`･ )

直接复制代码，粘贴到你需要的地方

2.开发者模式：

F12进入开发者模式（每个浏览器可能不一样）

看中什么，选中什么，在右面的界面中，鼠标右键copy->copy outHtml，导入HTML文件中

好了，这个组件是你的了

感谢各位的阅读！关于安装Bootstarp的示例就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！