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


Posted in Javascript onApril 19, 2019

一.安装

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

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

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

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

在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,找到下面选项

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

2.找到HTML文件

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

3.更改右边的代码

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

更改模板完成

三.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
    }

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

可以看到一个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>

效果如下:

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

还有重要的一点:

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

效果如下:

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

做的比较丑,勿怪。。

代码:

<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.通过官网的复制粘贴获取:( ・´ω`・ )

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

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

2.开发者模式:

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

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

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

好了,这个组件是你的了

四.多看官网。。。。

Bootstarp很多组件,在官网上有详细的介绍,请多多浏览官网

总结

以上所述是小编给大家介绍的Bootstarp在pycharm中的安装及简单的使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
实现动画效果核心方式的js代码
Sep 27 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
JavaScript实现队列结构过程
Dec 06 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 #Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 #Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 #Javascript
浅谈Javascript中的对象和继承
Apr 19 #Javascript
详解如何在Vue项目中导出Excel
Apr 19 #Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 #Javascript
详解vue中使用微信jssdk
Apr 19 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP简单选择排序算法实例
2015/01/26 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python实现斗地主分牌洗牌
2020/06/22 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
特色蛋糕店创业计划书
2014/01/28 职场文书
狼和鹿教学反思
2014/02/05 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
土木工程求职信
2014/05/29 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android