安装Bootstarp的示例-创新互联

这篇文章给大家分享的是有关安装Bootstarp的示例的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

我们提供的服务有:成都网站设计、做网站、微信公众号开发、网站优化、网站认证、吴堡ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的吴堡网站制作公司

一、安装

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

安装Bootstarp的示例

下载完成后,解压压缩包,把解压后的文件导入pycham中
安装Bootstarp的示例

在HTML页面中的style中导入bootstrap的css文件和js文件,建议导入min.css,体积更小

以我的文件路径为例:


安装完成


2.找到HTML文件

安装Bootstarp的示例

3.更改右边的代码

安装Bootstarp的示例

更改模板完成

//简单的模型

简单的测试一下:

//c1中没有设置宽度,只设置了div的高度
1
2
3
4
5
6
7
8
9
10
11
12
13
 .c1{
            height: 50px;
            background-color: red;
            border: 1px black solid
        }

c1的样式

安装Bootstarp的示例

可以看到一个container容器被分为12份,这是因为设置了col-lg-1的原因,该类可以从col-lg-1设置到col-lg-12,

1
2
3
4

效果如下:


安装Bootstarp的示例

还有重要的一点:

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

效果如下:

安装Bootstarp的示例

做的比较丑,勿怪。。

代码:

//在这个div里面进行切分
//结束
2
3
4

1.通过官网的复制粘贴获取:( ・´ω`・ )

安装Bootstarp的示例

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

2.开发者模式:

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

安装Bootstarp的示例

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

好了,这个组件是你的了

感谢各位的阅读!关于安装Bootstarp的示例就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页题目:安装Bootstarp的示例-创新互联
本文路径:http://myzitong.com/article/didgoj.html