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中的安装及简单的使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
- 深度学习胸部x射线
- C+实现神经网络之壹—Net类的设计和神经网络的初始化
- 死亡不可避免,但何时死,人工智能或有发言权
- 打开手机的这个功能,微信支付宝不怕盗刷!
- 手把手教你cuda5.5与VS2010的编译环境搭建
- Apache实现反向代理负载均衡
- linux下Apache服务器使用入门----httpd.conf
- linux下JBOSS使用入门
- CentOS下重新安装JDK,避免OpenJDK干扰
- linux虚拟机与winodows共享文件夹----linux安装VMware tools
- 虚拟机vmware与本地磁盘共享方法
- ADX3000二层的负载均衡设计问题
- cuda by example
- ADX3000的组网配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SOLID设计原则和我的一点个人感悟
- SpringBoot整合Freemarker使用
- Vm常见虚拟网络模式
- 设计模式 | 桥接模式
- Supervisor快速入门 | 使用Supervisor守护Nginx进程
- 技术选型的艺术---湖北技术价值分享会
- SpringBoot 配置文件编写及使用方式 (拒绝硬编码)
- Docker六脉神剑 (六) 1. Docker集群之Kubernetes(K8S) 了解k8s - 理论篇
- SpringBoot thymeleaf自定义错误页面
- SpringBoot 配置Redis操作
- SpringBoot 自定义banner (小彩蛋)
- SpringBoot使用Mybatis 快速入门
- 【CTR】ESMM:多任务联合学习
- 状态管理之Vuex (三) store利用module拆分
- MySQL 案例:无主键表产生的延迟