Bootstrap介绍

2024-02-28 19:06•JavaScript•阅读 2886

Bootstrap是基于HTML、CSS和JavaScript开源的前端开发工具包。

1、响应式布局:

效果:根据浏览器的宽度来调整页面布局。

例如：

<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style>
        @media(min-width:500px){   /*宽度小于500像素时,去掉bak样式*/
            .bak{
                background: red;
            }
        }
    </style>

    <div class="bak">
        hello world!
    </div>
</body>
</html>

2、伪类:

<body>
    <style>
        @media(min-width:500px){   /*宽度小于500像素时,去掉bak样式*/
            .bak{
                background: red;
            }
        }

        .add:after{
            content: 'ahaii'; /*在文本后面添加ahaii*/
        }

    </style>

    <div class="add">
        hello world!
    </div>
</body>

.before()用法一样。

.hover:after(): 当鼠标滑到标签上看，指定after()里面的样式。

Bootstrap使用:

http://v3.bootcss.com/