我想用Bootstrap完成什么:
desktop view
+-------------------------------------------+
| | |
| | |
| | |
| | |
| | |
| | |
| sidebar | content |
|accordion | |
| menu | |
| | |
| | |
| | |
| | |
|----------| |
| submenu | |
+-------------------------------------------+
tablet view
+-------------------------------+
| | submenu |
| |-------------------------|
| | |
| | |
| | |
| | |
|side | content |
|bar | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+-------------------------------+
phone view
+--------------+
| submenu |
|--------------|
| sidebar |
| accordion |
| toogle |
|--------------|
| |
| |
| |
| content |
| |
| |
| |
| |
| |
+--------------+
到目前为止我做了什么:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
border: 1px solid #ddd;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-2 col-xs-12">
side bar
<div class="row">
<div class="col-md-12 col-xs-12">sub menu</div>
</div>
</div>
<div class="col-md-8 col-sm-10 col-xs-12">content</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
是否真的可以使用Bootstrap制作此样本模板?这里有任何Bootstrap大师来帮助我吗? .............................................