在pycharm中安装Bootstarp 使用简单

一、安装

首次开放Bootstarp的官方网站：https://v3.bootcss.com

下载后，解压缩压缩包并将解压缩的文件导入pycham

以HTML页面的样式导入引导的css文件和js文件。建议导入较小的min.css

以我的文件路径为例：

安装了链接rel='样式表' href='引导/CSS/bootstrap.min.css' rel='外部nofollow '脚本src=' http : bootstrap/js/bootstrap . js '/脚本

2.更改pycharm的默认HTML页面(可以跳过)

在pycharm中创建新的HTML页面。如果仍然要使用Bootstarp，只能重新导入上述路径

为了避免重复工作，您可以更改默认的HTML模板

1.打开设置并找到以下选项

2.找到HTML文件

3.更改右边的代码

更改模板完成

Iii .Bootstarp的使用：

1.网格系统

Bootstarp的重要特性：网格系统

官方解释可以在官网看到：https://v3.bootcss.com/css/#grid

个人的理解是：在一个容器中，它是用行分隔的，每行长度分为12个单位

//简单模型div class=' container ' div class=' row '/div class=' row '/div class=' row '/div/div简单测试：

//宽度未在//c1中设置。只设置了div的高度。div class=' container ' div class=' row ' div class=' C1 col-LG-1 ' 1/div class=' C1 col-LG-1 ' 2/div class=' C1 col-LG-1 ' 3/div class=' C1 col-LG-1 ' 4/div class=' C1 col-LG-1 ' 5/div class=' C1 col-LG-1 ' 6/div class=' C1 col-LG-1 ' 7/div class=' C1 col-LG背景-颜色：红色；border: 1px黑色固体}

你可以看到一个容器分为12个部分，这是由于col-lg-1的设置，可以从col-lg-1设置到col-lg-12。

div class=' container ' div class=' row ' div class=' C1 col-LG-3 ' 1/div class=' C1 col-LG-3 ' 2/div class=' C1 col-LG-3 ' 3/div class=' C1 col-LG-3 ' 4/div/。

还有一点很重要：

每行的每一列都可以继续拆分

效果如下：

很丑，不怪。

代码：

Div class=' container ' Div class=' row '/Div class=' C1 col-LG-3 row ' Div class=' C1 col-LG-4 '/Div class=' C1 col-LG-4 '/Div class=' C1 col-LG-4 '/Div/Div//end Div class=' C1 col-LG-3 ' 2/Div class=' C1 col-LG-3 ' 3/Div Div class=' C1 col-LG-3 ' 4/Div/Div/Div组件和各种控件

1.通过复制粘贴官网获得：(`)

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

2.开发者模式：

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

选择你喜欢的和你想要的。在右边的界面中，右键单击复制-复制outHtml并将其导入到Html文件中

好吧，这个组件是你的

第四，多看看官网。

Bootstarp的很多组件在官网都有详细介绍。更多请访问官网

摘要

以上是边肖介绍的pycharm中Bootstarp的安装和简单使用。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！