Erfahren Sie, wie Sie Bootstrap verwenden (Navigationsleiste, Dropdown-Menü, Karussell, Rasterlayout usw.)-PHP开发-php.cn

Erfahren Sie, wie Sie Bootstrap verwenden (Navigationsleiste, Dropdown-Menü, Karussell, Rasterlayout usw.)

高洛峰

Freigeben： 2016-12-03 10:49:58

Original

1306 Leute haben es durchsucht

Dieser Artikel ist eine Jahresendzusammenfassung zum Lernen und zur Verwendung von Bootstrap. Der spezifische Inhalt lautet wie folgt:

Bootstrap-Framework

Das BootStrap-Lernen beginnt jetzt Das Bootstrap-Framework kann den Website-Entwicklungsprozess erheblich vereinfachen, was bei den meisten Entwicklern sehr beliebt ist.

<!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"><!-- 浏览器缩放 -->
 <title>Bootstrap</title>
 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 
 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// -->
 
 <!--[if lt IE 9]>
 <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 
 </head>
 <body>
 <h1>你好</h1>
 <!-- jQuery (necessary for Bootstrap&#39;s JavaScript plugins) -->
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Nach dem Login kopieren

Navigation

Navigation ist für einen Front-End-Menschen kein Unbekannter. Man kann sagen, dass die Navigation eines der wichtigen Elemente und Komponenten einer Website ist, die es Benutzern erleichtern kann, verschiedene funktionale Dienste zu finden, die von der Website bereitgestellt werden.

<nav class="nabber navbar-default" role="navigation"><!--导航条、默认样式、role定义内容是一个导航条-->
 <div class="container-fluid"><!--container居中固定宽度、c-f自适应大小的导航条-->
 <div class="navbar-header">
 
 <!--在响应式浏览器宽度小于一定值时，显示按钮-->
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 
 <!--logo图标-->
 <a class="navbar-brand" href="#">Brand</a>
 
 </div>
 
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--包裹代码，在宽度大于一定值时，button和此代码是没有作用的-->
 
 <!--导航条导航项目-->
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">a</a></li>
 <li><a href="#">a</a></li>
 </ul>
 </div>
 </div>
</nav>
 .navbar-inverse:改变导航条的背景颜色
 .container:居中显示
 固定导航条会遮盖页面内容，解决办法设置body的*padding-top*

Nach dem Login kopieren

Dropdown-Menü

Freunde, bitte beachten Sie, dass die Dropdown-Menükomponente im Bootstrap-Framework eine unabhängige Komponente ist.

<li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else</a></li>
 <li class="divider"></li>
 <li><a href="#">linkkk/a></li>
 </ul>
</li>

Nach dem Login kopieren

Die Datenattribut-API kann alle Bootstrap-Plugins verwenden

Karussellanzeigen (Karussell)

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 
 <!--底部导航点。。。-->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>
 
 <!--轮播广告内容-->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
 <img src="…">
 <div class="carousel-caption">……</div>
 </div>
 <div class="item active">
 <img src="…">
 <div class="carousel-caption">……</div>
 </div>
 </div>
 
 <!--左右箭头-->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 <pan class="sr-only">previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 <pan class="sr-only">Next</span>
 </a>
</div>

Nach dem Login kopieren

.data-slide-to index , Zeigt auf den Inhalt der Karussellanzeige, beginnend bei 0
.carousel legt den Stil der Anzeigenbox fest (Höhe, Hintergrundfarbe)
.carousel .item legt den Stil der Anzeigenbox fest (Höhe, Hintergrundfarbe). )
Rastersystem-Layout

<div class="container">
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 </div>
</div>

Nach dem Login kopieren

Registerkarten

<!--标签-->
<ul class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
 <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
 <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
 
<!--标签的内容-->
<div class="tab-content">
 <div class="tab-pane active" id="home">…</div>
 <div class="tab-pane" id="profile">…</div>
 <div class="tab-pane" id="messages">…</div>
 <div class="tab-pane" id="settings">…</div>
</div>

Nach dem Login kopieren

Tabs

<div class="modal fade">
 <div class="modal-dialog">
 <div class="content">
 
 <!--标签头部-->
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">
 <span aria-hidden="true">×</span>
 <span class="sr-only">Close</span>
 <h4 class="modal-title">Modal title</h4>
 </button>
 </div>
 
 <!--标签体-->
 <div class="modal-body">
 …
 </div>
 
 <!--标签底部-->
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
 </div>
 
 </div>
 </div>
</div>

Nach dem Login kopieren