BootStrap入门

来源：互联网发布：网页游戏挂机软件编辑：程序博客网时间：2024/05/01 15:58

前言

使用BootStrap必须要有一定的Html，Css ,JS 基础、有了这些，理解BootStrap是很简单的、其实BootStrap就是Css和JS的封装、只要给一个标签加上相应的Class，他马上就会变成相当漂亮的BootStrap风格控件。

BootStrap响应式，当页面被不同的客户端加载、手机、平板、PC，同样的代码可以改编成不同终端适应的样式。

栅格

这个是BootStrap一个非常重要的概念、也是最基础的、BootStrap实现响应式布局都靠他了！

那什么是栅格？其实他就是把网页的宽、平均分了12份、当网页放大缩小每个格子也会相应的按照12分之一的百分比变化。

如何使用

例子

最近开发一个项目、做了个网页例子，但是因为保密的原因是不能往上发的- - 、所以跟大家弄几个小例子吧！

1 首先要引用BootStrap的所有js和css 、引用带min的就行

2 注意要用HTML在页面最上边加上<!DOCTYPE html>就可以了

布局

<!--居中-->    <div class="container">        <!--第一行-->        <div class="row">            <!--占6个格子-->            <div class="col-xs-6">            </div>            <div class="col-xs-6">            </div>        </div>        <!--第二行-->        <div class="row">            <div class="col-xs-4">            </div>            <div class="col-xs-8">            </div>        </div>    </div>

其他的控件加到Col-xs-8里面用就可以了、例子请参照
http://v3.bootcss.com/css/

—————————自己的成果不能上传额。。。—————————

——————chenchen———————

复制

<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    Dropdown    <span class="caret"></span>  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li><a href="#">Separated link</a></li>  </ul></div>

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。

复制

<div class="dropdown">  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    Dropdown    <span class="caret"></span>  </button>  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">    <li><a href="#">Action</a></li>    <li><a href="#">Another action</a></li>    <li><a href="#">Something else here</a></li>    <li><a href="#">Separated link</a></li>  </ul></div>

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。

0 0