首页 > 代码库 > bootstrap基本用法

bootstrap基本用法

进入中文官网:http://www.bootcss.com
 
开始第一个Demo
 
准备工作:
(1)进入bootstrap中文官网,点击起步
技术分享
(2)下载生产环境
技术分享
        下载好的文件是一个压缩文件,学习时建议使用未压缩版本,项目开发时必须使用压缩版本。
 
(3)找到基本模板,将其复制粘贴进来,当然,必要时需要按需求进行更改。
技术分享
 
  1. 学习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>
 
  1. 组件
参考官网地址(http://v3.bootcss.com/components/),直接引用。
 
  1. JavaScript插件
常用的用模态框(弹出框)、标签页、carousel(轮播图)、提示弹出框
用法(比喻):
技术分享
直接把下面给出的代码copy进去,然后按需求进行更改即可。
 
 

bootstrap基本用法