BootStrap入门

最新推荐文章于 2022-03-01 18:32:32 发布

Chenchen-

最新推荐文章于 2022-03-01 18:32:32 发布

阅读量630

点赞数

本文链接：https://blog.csdn.net/u010191034/article/details/47658981

版权

前言

使用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 类，可以让菜单向上弹出（默认是向下弹出的）。

Chenchen-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
20
评论
BootStrap入门

前言使用BootStrap必须要有一定的Html，Css ,JS 基础、有了这些，理解BootStrap是很简单的、其实BootStrap就是Css和JS的封装、只要给一个标签加上相应的Class，他马上就会变成相当漂亮的BootStrap风格控件。BootStrap响应式，当页面被不同的客户端加载、手机、平板、PC，同样的代码可以改编成不同终端适应的样式。栅格
复制链接

扫一扫