首页 > 代码库 > bootstrap基本用法
bootstrap基本用法
进入中文官网:http://www.bootcss.com
开始第一个Demo
准备工作:
(1)进入bootstrap中文官网,点击起步
(2)下载生产环境
下载好的文件是一个压缩文件,学习时建议使用未压缩版本,项目开发时必须使用压缩版本。
(3)找到基本模板,将其复制粘贴进来,当然,必要时需要按需求进行更改。
- 学习bootstrap首先需要理解的是栅格系统,看官网(http://v3.bootcss.com/css/#grid-intro)给的定义:
我们需要理解的是col-xs- 、colo-sm- 、col-md- 、col-lg- 的用法,bootstrap本身的定义是一行固定有12列,其中这些后面跟的数字就是当前模块所占的列数,占满12列就是一行,多出来的就挤到下一行,跟之前的float思想一样。
通常的做法是:
<section id=“id”> //设定一个大的模块
<div class="container”> //定义里面存放内容模块
<div class="row”> //定义一行,里面默认12列
<div class="col-md-12" > //定义一个模块,在992px-1200px这个像素区域内所占12列。
<h2>xxxxxxxx</h2>
</div>
</div>
</div>
<section>
- 组件
参考官网地址(http://v3.bootcss.com/components/),直接引用。
- JavaScript插件
常用的用模态框(弹出框)、标签页、carousel(轮播图)、提示弹出框
用法(比喻):
直接把下面给出的代码copy进去,然后按需求进行更改即可。
bootstrap基本用法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。