bootstrap教程(bootstrap框架之bootstrap怎么使用)

被浏览:7234

关注者:994

最佳回答:

1.bootstrap是什么?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

2.bootstrap框架怎么用?

第一步,首先将bootstrap下载下来后,放在一个专门的文件夹下

第二步,在HTML框架中添加如下代码(如下代码可以通过官网--入门--基础模板找到)

alt="bootstrap框架之bootstrap怎么使用?" >

第三步,引入css样式。即通过第一步下载bootstrap中的css。

第四步,修改样式,如果想要修改,直接添加类名的方式,修改即可。

3.bootstrap框架怎么用?

1)在使用bootstrap框架的时候,需要先定义一个名为container的类,container类名是固定的,不能根据自己的喜好自定义:

alt="bootstrap框架之bootstrap怎么使用?" >

2)然后在container中可以随意放置子元素,比如我想要container中放置4个div的子盒子:

3)由于我们是使用bootstrap框架,因此在制作响应式布局的时候,不需要通过媒体查询来控制页面的宽度,而是通过container来控制,具体怎么控制呢?

①当页面是大屏显示的时候,我们只需要将col-lg-*的类放在container中的几个盒子中;举个例子:当我们想要在大屏一行显示4个div元素,那么*=12/4=3:

alt="bootstrap框架之bootstrap怎么使用?" >

②当页面是中屏显示的时候,我们只需要将col-md-*的类放在container中的几个盒子中;举个例子:当我们想要在中屏一行显示3个div元素,那么*=12/3=4:

alt="bootstrap框架之bootstrap怎么使用?" >

③当页面是小屏显示的时候,我们只需要将col-sm-*的类放在container中的几个盒子中;举个例子:当我们想要在小屏一行显示2个div元素,那么*=12/2=6:

alt="bootstrap框架之bootstrap怎么使用?" >

④当页面是超级小屏显示的时候,我们只需要将col-xs-*的类放在container中的几个盒子中;举个例子:当我们想要在超级小屏一行显示1个div元素,那么*=12/1=12:

alt="bootstrap框架之bootstrap怎么使用?" >

获赞数:232

收藏数:49

回答时间:2024-04-22 19:14:35