Bootstrap实现流动布局实例

 时间:2024-10-14 23:33:27

1、 前端用到的编辑器有很多,本例通过选择Sublime Text3编辑器来实现Bootstrap简单布局的制作。第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个html文件,通过Tab快捷键迅速创建一个html模板,并命名标题。如图所示:

Bootstrap实现流动布局实例

3、 第三步,在Body中写简单的html代码。在一个容器div中,加一个标题和一段说明文字。然后加一个子div,里面又并列三个子div,div里面也同样加一个标题和一段说明文字。在浏览器中查看初始化效果,可以看到,各个div元素分段显示,如图所示:

Bootstrap实现流动布局实例Bootstrap实现流动布局实例Bootstrap实现流动布局实例

6、 第六步,在三个子div中,添加名为“col-xs-4 col-sm-4col-md-4 col-lg-4”的类,这四个类分别适用于手机、平板电脑、中型电脑、大型电脑的,即可实现自适应布局。如图所示:

Bootstrap实现流动布局实例
  • 用div控制三块分别显示红色、黄色、蓝色
  • HTML5 svg和CSS3炫酷鼠标点击按钮特效制作方法
  • 如何使用CSS3中的flex布局设置无序列表样式
  • html+jquery垂直手风琴滑动效果
  • css:position:absolute绝对定位
  • 热门搜索
    福鼎旅游 组团旅游网 去朝鲜旅游注意事项 宝中旅游官网 现在去哪里旅游最好 安昌古镇旅游攻略 腾讯旅游 缙云旅游 福建有什么旅游景点 北京旅游年票