百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> Bootstarp的安装教程(细致)
分享文章到:

Bootstarp的安装教程(细致)

发布时间:09/01 来源:未知 浏览: 关键词:
本篇文章给大家带来的内容是关于Bootstarp的安置教程(具体),有必然的参照 价值,有需要的伴侣可以参照 一下,但愿对你有所帮忙。

一、安置

第一翻开Bootstarp的官网:https://v3.bootcss.com

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

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

以我的文件途径为例:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.js"></script>

安置完成

二.更换pycharm的默许HTML页面(可跳过)

在pycharm中创立一个新的HTML页面,假如还想使用Bootstarp,只能从新导入上述途径

为了不反复的工作,可以更换默许的HTML模板

1.翻开setting,寻到下面选项

2.寻到HTML文件

3.更换右侧的代码

更换模板完成

三.Bootstarp的使用:

1.栅格系统

Bootstarp的重要特性:栅格系统

官方的说明可以看官网:https://v3.bootcss.com/css/#grid

个人懂得就是:在一个container的容器内,被行分隔,每一行分为12个单位的长度

//简便的模型
<div class='container'>
      <div class='row'> </div>
      <div class='row'> </div>
      <div class='row'> </div>
</div>

简便的测试一下:

//c1中没有设定宽度,只设定了div的高度
<div class="container">
    <div class="row">
        <div class="c1 col-lg-1 ">1</div>
        <div class="c1 col-lg-1 ">2</div>
        <div class="c1 col-lg-1 ">3</div>
        <div class="c1 col-lg-1 ">4</div>
        <div class="c1 col-lg-1 ">5</div>
        <div class="c1 col-lg-1 ">6</div>
        <div class="c1 col-lg-1 ">7</div>
        <div class="c1 col-lg-1 ">8</div>
        <div class="c1 col-lg-1 ">9</div>
        <div class="c1 col-lg-1 ">10</div>
        <div class="c1 col-lg-1 ">11</div>
        <div class="c1 col-lg-1 ">12</div>
        <div class="c1 col-lg-1 ">13</div>
    </div>
</div>
 .c1{
            height: 50px;
            background-color: red;
            border: 1px black solid
        }

c1的样式

可以看到一个container容器被分为12份,这是由于设定了col-lg-1的缘由,该类可以从col-lg-1设定到col-lg-12,

<div class="container">
    <div class="row">
        <div class="c1 col-lg-3 ">1</div>
        <div class="c1 col-lg-3 ">2</div>
        <div class="c1 col-lg-3 ">3</div>
        <div class="c1 col-lg-3 ">4</div>

    </div>
</div>

结果如下:

还有重要的一点:

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

结果如下:

做的比力丑,勿怪。。

代码:

<div class="container">
    <div class="row">
       //在这个div里面停止切分
        <div class="c1 col-lg-3  row">
            <div class="c1 col-lg-4 "></div>
            <div class="c1 col-lg-4 "></div>
             <div class="c1 col-lg-4 "></div>
        </div>
       //完毕
        <div class="c1 col-lg-3 ">2</div>
        <div class="c1 col-lg-3 ">3</div>
        <div class="c1 col-lg-3 ">4</div>

    </div>
</div>

2.组件和各种控件的猎取:

1.通过官网的复制粘贴猎取:( ?′ω`? )

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

2.开发者模式:

F12进入开发者模式(每个阅读器大概不一样)

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

好了,这个组件是你的了

四.多看官网。。。。

Bootstarp许多组件,在官网上有具体的介绍,请很多阅读官网

以上就是Bootstarp的安置教程(具体)的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板