您的位置：首页 > Web前端 > BootStrap

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

2017-09-22 16:55 549 查看

之前没有用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>

按钮和下拉选择都要包裹在
….内

按钮必须添加 data-toggle=”dropdown” 触发器

放置下拉选项的无须列表需要添加 .dropdown-menu 类

添加一个空的

<li class="divider"></li>

来分割列表项

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航