Bootstrap-css前端框架(二、基本样式)

最新推荐文章于 2024-08-26 11:53:53 发布

我慌

最新推荐文章于 2024-08-26 11:53:53 发布

阅读量890

点赞数

分类专栏： jQuery css javascript html 前端框架

本文链接：https://blog.csdn.net/dingzepeng97/article/details/78064783

版权

javascript 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

之前没有用Bootstrap前端框架的时候我们想要得到一个相对漂亮的按钮需要写一串css代码,在有了Bootstrap之后我们直接可以使用Bootstrap来得到一个漂亮的按钮样式.
在每一个button标签中加入一个class属性,Bootstrap按钮的属性值有7种,分别是不同的风格样式,如下代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <button type="button" class="btn btn-default">默认</button>
    <button type="button" class="btn btn-primary ">主要</button>
    <button type="button" class="btn btn-success">成功</button>
    <button type="button" class="btn btn-info">信息</button>
    <button type="button" class="btn btn-warning">警告</button>
    <button type="button" class="btn btn-danger">危险</button>
    <button type="button" class="btn btn-link">危险</button>

    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
</body>
</html>

它们对应的样式如下图:
这里写图片描述
使用了Bootstrap框架,我们可以通过添加class属性,来添加不同的样式,Bootstrap提供改变大小的class属性值btn-lg、btn-sm、btn-xs分别对应的最大、较小、最小。
若想添加一个关闭按钮直接将这个button的class赋予close属性值。

Bootstrap提供的修改图片样式的class属性
img-rounded:让图片棱角有弧度
img-circle:让图片以圆形表示
img-thumbnail:让图片扁平化
第一个是不加样式的,后面分别对应下面这几个图,
这里写图片描述

Bootstrap提供了导航栏的样式，它提供的导航栏主要有:胶囊式导航、面包屑导航、头部导航3类。
胶囊导航的实质是一个无序列表，只需要给ul元素添加.nav和.nav-pills类即可

<ul class="nav nav-pills">
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>

读者可以自行测试

垂直导航栏只需要在水平胶囊导航基础上加一个.nav-stacked类即可

面包屑导航一般用于有层次关系的选项，如果想实现面包屑导航,需要给ul加一个.breadcrumb类即可.

下拉菜单:

<div class="dropdown">

    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <li><a href="#">选项一</a></li>
        <li><a href="#">选项二</a></li>
        <li><a href="#">选项三</a></li>
        <li class="divider"></li>
        <li><a href="#">选项四</a></li>
    </ul>

</div>