Bootstarp的安装以及简单的使用方法(pycharm中)
一.安装
首先打开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的安装以及简单的使用方法(pycharm中)的更多相关文章
- BBED的安装及简单的使用方法
记录下BBED的安装--ORACLE 11.2.0.4下 1.在ORACLE 11G下安装BBED,需要从ORACLE 10G中复制三个包 bbedus.msb sbbdp ...
- Python在终端通过pip安装好包以后,在Pycharm中依然无法使用的解决办法
在终端通过pip装好包以后,在pycharm中导入包时,依然会报错.新手不知道具体原因是什么,我把我的解决过程发出来. pip install 解决方案一: 在Pycharm中,依次打开File--- ...
- 转 python - Python在终端通过pip安装好包以后,在Pycharm中依然无法使用的解决办法
转 https://blog.csdn.net/kouyi5627/article/details/80531442 在终端通过pip装好包以后,在pycharm中导入包时,依然会报错.新手不知道具体 ...
- windows安装tensorflow简单直接的方法(win10+pycharm+tensorflow-gpu1.7+cuda9.1+cudnn7.1)
安装tensorflow-gpu环境需要:python环境,tensorflow-gpu包,cuda,cudnn 一,安装python,pip3直接到官网下载就好了,下载并安装你喜欢的版本 https ...
- idea 热部署之JRebel安装-激活-简单使用(修改方法\配置文件均生效)
1.简介 JRebel插件在IntelliJ IDEA中用于代码的热部署,即工程在已经启动的状态下修改代码,可以不用再重启服务,JRebel插件会自动帮我们编译代码,然后重启.整个重启的过程耗时非常短 ...
- (转)python requests的安装与简单运用
requests是python的一个HTTP客户端库,跟urllib,urllib2类似,那为什么要用requests而不用urllib2呢?官方文档中是这样说明的: python的标准库urllib ...
- python requests的安装与简单运用
requests是python的一个HTTP客户端库,跟urllib,urllib2类似,那为什么要用requests而不用urllib2呢?官方文档中是这样说明的: python的标准库urllib ...
- memcache的windows下的安装和简单使用
原文:memcache的windows下的安装和简单使用 memcache是为了解决网站访问量大,数据库压力倍增的解决方案之一,由于其简单实用,很多站点现在都在使用memcache,但是memcach ...
- C#分布式缓存一:Couchbase的安装与简单使用
一.简介 目前C#业界使用得最多的 Cache 系统主要是 Memcached和 Redis. 这两个 Cache 系统可以说是比较成熟的解决方案,也是很多系统当然的选择. Memcache的开发团队 ...
随机推荐
- Win10 UWP开发系列:解决Win10不同版本的Style差异导致的兼容性问题
最近在开发一个项目时,遇到了一个奇怪的问题,项目依赖的最低版本是10586,目标版本是14393,开发完毕发布到商店后,很多用户报无法正常加载页面.经查,有问题的都是Win10 10586版本. 我上 ...
- python_汉塔诺
'''据说古代有一个梵塔,塔内有三个底座A.B.C,A座上有64个盘子,盘子大小不等,大的在下,小的在上.有一个和尚想把这64个盘子从A座移到C座,但每次只能允许移动一个盘子,在移动盘子的过程中可以利 ...
- git进阶
一.刚提交的代码,发现需要微调一下 刚刚最新提交了一段代码,然后跟前端说,接口好了.过了2分钟,前端跟你说,哎,兄弟,那个金额能不能返回整数,不要小数点. 这个时候一般我们通常会修改一下之后,再提交一 ...
- unity3d入门教程
2010年Unity3D游戏引擎进入人们的视野,它操作简单.易学.灵活,逐步被各类平台厂商运用到新作品中,产生了全球游戏开发商.个人使用Unity3D的热潮.而在国内,根据权威部门统计,50%的Uni ...
- Linux的文本处理工具浅谈-awk sed grep
Linux的文本处理工具浅谈 awk 老大 [功能说明] 用于文本处理的语言(取行,过滤),支持正则 NR代表行数,$n取某一列,$NF最后一列 NR==20,NR==30 从20行到30行 FS ...
- 安装mysql5.5.28的步骤 2017.6.27
http://blog.sina.com.cn/s/blog_7cd69a6501014x7h.html
- thinter中combobox下拉选择控件(九)
combobox控件,下拉菜单控件 combobox控件在tkinter中的ttk下 简单的实现下: import tkinter from tkinter import ttk # 导入ttk模块, ...
- MassTransit 实现发布/订阅
MassTransit 介绍 先看下masstransit 官网介绍:MassTransit 是一个自由.开源.轻量级的消息总线, 用于使用. NET 框架创建分布式应用程序.MassTransit ...
- CAD中用户选择实体
在CAD的很多操作中都会有需要用户选择实体的时候,这里将我最近项目中用到的方法分享一下,程序原意是希望用户选择一个单行文本或者多行文本,并返回所选文本的内容,直接上代码: CString CPaint ...
- BZOJ_1026_[SCOI2009]windy数_数位DP
BZOJ_1026_[SCOI2009]windy数_数位DP 题意:windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之 ...