bootstrap-全局CSS样式
文章目录
- 一、全局CSS样式：
- （一）按钮
- （二） [图片](https://v3.bootcss.com/css/#images)
- 1.响应式布局
- 2. 图片形状
- （三）[表格](https://v3.bootcss.com/css/#tables)
- （四）[表单](https://v3.bootcss.com/css/#forms)
- 二、组件：
- （一）[导航条](https://v3.bootcss.com/components/#navbar)
- （二）[分页条](https://v3.bootcss.com/components/#pagination)
- 三、 插件：
- （一）[Carousel（轮播图）](https://v3.bootcss.com/javascript/#carousel)
bootstrap-全局CSS样式只需会查看文档，选择需要的内容修改即可
一、全局CSS样式：
（一）按钮
样式：class="btn btn-default"//default不同，背景色会不同
按钮Css样式代码赏析：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="js/jquery-3.2.1.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script>
</head>
<body><a class="btn btn-default" href="#" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit"><br><!-- Standard button --><button type="button" class="btn btn-default">（默认样式）Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons --><button type="button" class="btn btn-primary">（首选项）Primary</button><!-- Indicates a successful or positive action --><button type="button" class="btn btn-success">（成功）Success</button><!-- Contextual button for informational alert messages --><button type="button" class="btn btn-info">（一般信息）Info</button><!-- Indicates caution should be taken with this action --><button type="button" class="btn btn-warning">（警告）Warning</button><!-- Indicates a dangerous or potentially negative action --><button type="button" class="btn btn-danger">（危险）Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior --><button type="button" class="btn btn-link">（链接）Link</button>
</body>
</html>
拷入代码执行后得到
（二） 图片
1.响应式布局
class="img-responsive"//该样式使得图片在任意大小的屏幕长度都为100%
①一个普通的图片，全屏和小屏对比图如下
小屏幕无法一次性显示100%这个图片
②加了该样式以后，小屏幕图片为
2. 图片形状
<img src="..." alt="..." class="img-rounded">//①方形
<img src="..." alt="..." class="img-circle"> //② 圆形
<img src="..." alt="..." class="img-thumbnail">// ③相框
（三）表格
样式
. table
. table-bordered
. table-hover
（四）表单
二、组件：
（一）导航条
代码看不懂，删着看，删一个看出什么效果，这个代码就是什么意思
<nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><!--定义屏幕缩小时的汉堡按钮--><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><!-- 定义汉堡按钮中的三条线的，删一个少一条--></button><a class="navbar-brand" href="#">Brand</a><!--一般用于放左上角的首页的--></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><!-- 定义下拉列表的--><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><!--表单 --><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
（二）分页条
三、 插件：
（一）Carousel（轮播图）
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！