BootStrap入门

发布时间：2020-12-17 21:03:35 所属栏目：安全来源：网络整理

导读：前言 ? ? ? ? ? 使用BootStrap必须要有一定的Html，Css,JS 基

前言

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!