Bootstarp在pycharm中的安装及简单的使用方法

一.安装

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

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

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

以我的文件路径为例：

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" >
<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
    }

可以看到一个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在pycharm中的安装及简单的使用方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 解决Pycharm无法import自己安装的第三方module问题

    又遇到与pycharm配置有关的问题.pycharm无法import自己安装的第三方库,好神奇啊,这个可是在pycharm下安装的地三方module. 那么我的配置问题出在哪里? 打开File->Default Settings->Default Preferences , 配置的解释器是2.7,但打开PyCharm->preferences->Project Interpreter,配置的解释器是2.6. 改成一样都是2.7,重新打开Pycharm就能import了,哈哈哈. 以

  • pycharm安装和首次使用教程

    PyCharm 是我用过的python编辑器中,比较顺手的一个.而且可以跨平台,在macos和windows下面都可以用,这点比较好.是python现在最好用的编辑器,没有之一. 首先预览一下 PyCharm 在实际应用中的界面:(更改了PyCharm的默认风格) 安装 官网:官网地址 社区版(Community)已经免费,推荐大家使用社区版. 首次使用 最好在首次使用时,就设置一下主题,为 Dracula,深色比较好看. 1.点击Create New Project. 2.输入项目名.路径.选

  • 在PyCharm环境中使用Jupyter Notebook的两种方法总结

    方法一: 1.安装Jupyter Notebook pip install jupyter 2.在PyCharm中新建Jupyter Notebook文件 步骤:File->New...->Jupyter Notebook->输入文件名 建好之后效果如下图所示,就是熟悉的Jupyter Notebook界面: 3.运行 输入代码,点击绿色小三角运行代码. 方法二: 1.安装Jupyter Notebook pip install jupyter 2.打开Python Console 打开

  • 解决pycharm无法调用pip安装的包问题

    问题:pycharm无法调用pip安装的包 原因:pycharm没有设置解析器 解决方法: 打开pycharm->File->Settings->Project Interpreter->设置为你的python路径,我的是:C:\Python27\python.exe,你们根据各自python安装路径修改一下即可 可以先在terminal中,python 显示当前版本,再选择路径,因为通过pip安装的包都在该版本下 有时候需要重新建立一个工程,是因为你的工程混乱了,不知道用哪个py

  • Bootstrap框架安装使用详解

    Bootstrap框架安装使用详解

    Bootstrap框架安装使用简单介绍 下载 Bootstrap 可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本. Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Download Source:下载源代码.点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaS

  • python使用Pycharm创建一个Django项目

    本文为Django项目创建的简单介绍,更为详细的Django项目创建,可以参考如下教程: Django入门与实践-//www.jb51.net/article/64109.htm Pycharm 版本: Professional 2017.1 Django 版本: 1.8.7 在软件安装和环境配置完成后,打开Pycharm. Step 1. 点击 File --> New Project 弹出如下窗口: 图中编号1处为项目位置:编号2处为使用的模板语言类型,默认为Django模板语言:编号3处是

  • Bootstarp在pycharm中的安装及简单的使用方法

    Bootstarp在pycharm中的安装及简单的使用方法

    一.安装 首先打开Bootstarp的官网: https://v3.bootcss.com 下载完成后,解压压缩包,把解压后的文件导入pycham中 在HTML页面中的style中导入bootstrap的css文件和js文件,建议导入min.css,体积更小 以我的文件路径为例: <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow&q

  • PyCharm中关于安装第三方包的三个建议

    大家在使用PyCharm的过程中,肯定会遇到各种各样的问题,其中一个问题就是很多第三方的包安装不了.在使用过程中,我对这种情况进行了总结,现在将各种方法跟大家讲一下. 第一: 大家可以在PyCharm的平台上进行安装,安装方法就是依次进入"File"–>"Settings"–>"Project"–>"Project Interpreter",点击右侧的"+"号,进入搜索界面,寻找所需的包,

  • 在PyCharm中实现关闭一个死循环程序的方法

    由于刚刚学习python,对PyCharm也不是很熟悉,在成功运行多个死循环程序而没有关闭它的情况下,PyCharm成功的经常无响应,反应缓慢,一度怀疑是电脑出问题了,经过多次试验,嗯,不是电脑的问题. 接下来就详细说明如何关闭死循环程序: 第一步: (注意看死循环程序和正常运行的程序的区别) 第二步: (鼠标左键单击选择要关闭的死循环程序,然后单击右键选择红色框位置的选项,左键点击) 第三步: (点击后出现下图,然后左键点击红色框位置选项) 第四步: (检查是否已经删除,现在只剩下正常运行的程

  • 在pycharm中python切换解释器失败的解决方法

    在pycharm中我们有时需要切换python的版本,这里需要注意的是我们是在PyCharm中的Preferences中切换的, 在File的Setting中切换可能会导致失败 以上这篇在pycharm中python切换解释器失败的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在Pycharm中修改文件默认打开方式的方法

    新下载了一个Pycharm,建了个小demo,期间产生了一个sqlite3文件,由于是第一次打开,就弹出选择打开方式的对话框,手一块直接点了个Text,然后就乱码了: 那我们不小心操作后,怎么重新修改文件的默认打开方式呢? 1.File -> Settings -> Editor -> File Types 找到Text下的"*.sqlite3",把它删掉就ok啦~ 以上这篇在Pycharm中修改文件默认打开方式的方法就是小编分享给大家的全部内容了,希望能给大家一个参

  • pycharm中import呈现灰色原因的解决方法

    1. 问题描述: 同目录下,当多个文件之间有相互依赖的关系的时候,import无法识别自己写的模块,PyCharm中提示No Module. 2. 解决步骤: (1). 打开File--> Setting-> 打开 Console下的Python Console,把选项(Add source roots to PYTHONPAT)点击勾选上 (2). 右键点击自己的工作空间文件夹,找到Mark Directory as 选择Source Root,问题解决! 按照上面给的设置"右键点

  • 如何在pycharm中快捷安装pip命令(如pygame)

    如何在pycharm中快捷安装pip命令(如pygame)

    这是我自己实测过的方法,直接在命令行里输入pip install +(所需要的库),即可成功下载,可能它会自动检测电脑Python的版本而下载对应的版本,各位可以试一下! 比如:在命令框输入 pip install pygame 安装 pyganme pip install matplotlib 安装 matplotlib 测试: 无任何提示即表明安装成功! 补充:Python在终端通过pip安装好包以后,在Pycharm中依然无法使用的解决办法 在终端通过pip装好包以后,在pycharm中导

  • pycharm中使用anaconda部署python环境的方法步骤

    今天来说一下python中一个管理包很好用的工具anaconda,可以轻松实现python中各种包的管理.相信大家都会有这种体验,在pycharm也是有包自动搜索和下载的功能,这个我在前面的一篇博客中有相关的介绍(详情请查看点击打开链接),但是这种功能对于一些包是可以使用的,但是总是会遇到有些包下载失败或查询不到的时候,这个时候就会让人很苦恼了.这里我们就来说一下anaconda的好处. 下面是我从别的地方贴来的说辞: Anaconda的优点总结起来就八个字:省时省心.分析利器. 省时省心: A

  • pycharm中django框架连接mysql数据库的方法

    pycharm中django框架连接mysql数据库的方法

    1.首先下载安装pymysql模块. pip install pymysql 如果出现 timeout 超时可以使用其他的资源下载: pip install 模块名 -i https://pypi.douban.com/simple 2.导入库 在项目的init文件中编写下列代码: # 导入pymysql模块 import pymysql pymysql.install_as_MySQLdb() 这样整个项目都能使用pymysql,就不用再每个文件都导入pymyqsl 3.在seeting.py

  • 新建文件时Pycharm中自动设置头部模板信息的方法

    前言 pycharm默认是没有为我们设置模板信息的,但为了更加方便的实现代码管理,以及能够一目了然的查看到我们是什么时候写的代码,个人觉得增加一个模板信息还是很有必要的. 实现方法 依次点击 File | Settings | Editor | File and Code Templates, 然后选中python Script,在右边的输入框中填入你想要设计的模板信息即可.下面是图形实例 编辑内容 pycharm中设置了许多相应的模板信息,可以根据需要写入 $ {YEAR} #当年 $ {MO

随机推荐