安装Bootstarp的示例
这篇文章给大家分享的是有关安装Bootstarp的示例的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
陵城网站建设公司创新互联建站,陵城网站设计制作,有大型网站制作公司丰富经验。已为陵城成百上千提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的陵城做网站的公司定做!
一、安装
首先打开Bootstarp的官网:https://v3.bootcss.com
下载完成后,解压压缩包,把解压后的文件导入pycham中
在HTML页面中的style中导入bootstrap的css文件和js文件,建议导入min.css,体积更小
以我的文件路径为例:
安装完成
二.更改pycharm的默认HTML页面(可跳过)
在pycharm中创建一个新的HTML页面,如果还想使用Bootstarp,只能重新导入上述路径
为了避免重复的工作,可以更改默认的HTML模板
1.打开setting,找到下面选项
2.找到HTML文件
3.更改右边的代码
更改模板完成
三.Bootstarp的使用:
1.栅格系统
Bootstarp的重要特性:栅格系统
官方的解释可以看官网:https://v3.bootcss.com/css/#grid
个人理解就是:在一个container的容器内,被行分隔,每一行分为12个单位的长度
//简单的模型
简单的测试一下:
//c1中没有设置宽度,只设置了div的高度12345678910111213
.c1{ height: 50px; background-color: red; border: 1px black solid }
c1的样式
可以看到一个container容器被分为12份,这是因为设置了col-lg-1的原因,该类可以从col-lg-1设置到col-lg-12,
1234
效果如下:
还有重要的一点:
每一行的每一个列还可以继续切分
效果如下:
做的比较丑,勿怪。。
代码:
//在这个div里面进行切分//结束234
2.组件和各种控件的获取:
1.通过官网的复制粘贴获取:( ・´ω`・ )
直接复制代码,粘贴到你需要的地方
2.开发者模式:
F12进入开发者模式(每个浏览器可能不一样)
看中什么,选中什么,在右面的界面中,鼠标右键copy->copy outHtml,导入HTML文件中
好了,这个组件是你的了
感谢各位的阅读!关于安装Bootstarp的示例就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
当前文章:安装Bootstarp的示例
转载注明:http://pwwzsj.com/article/iphghj.html