瞭解BootStrap
1.瞭解Bootstrap:
簡潔,直觀,強悍的前端開發框架,讓web開發更迅速,簡單。
2.優點:
快速,簡單,靈活的柵格系統,小而強大,響應式佈局,跨平臺等。
3.下載
登陸BootStrap的官方網站下載: http://getbootstrap.com/ 。
下面使用Bootstrap官方提供的模板來設計一個響應式佈局。
(1)從下載的BootStrap中找出bootstrap.min.css檔案複製到專案中。
(2)新建一個style.css檔案,實現程式碼如下:
.row{
margin-bottom: 20px;
}
.row .row{
margin-top: 10px;
margin-bottom: 0px;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #dddddd;
border: 1px solid rgba(86, 61, 214,.2);
}
(3)新建一個HTML檔案,實現程式碼如下,其中的程式碼都是Bootstrap官網提供的示例程式碼,可以用起來非常的方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<!--導航欄-->
<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" role="search">
<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>
<!--表格-->
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<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 class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<!--表單-->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
實現效果如下:
。
github主頁:https://github.com/chenyufeng1991 。歡迎大家訪問!
相關文章
- 瞭解一下Bootstrapboot
- Oracle bootstrap$ 詳解Oracleboot
- webpack bootstrap原始碼解讀Webboot原始碼
- runLoop瞭解OOP
- 瞭解webpackWeb
- 瞭解JoomlaOOM
- 瞭解 RESTfulREST
- 瞭解ASMASM
- Stream瞭解
- JavaWeb瞭解JavaWeb
- 【BootStrap】--前端利器BootStrapboot前端
- 深入瞭解解析Https - 從瞭解到放棄HTTP
- Bootstrap系列 -- 22. 按鈕詳解boot
- Bootstrap 4 重大更新,亮點解讀boot
- Docker瞭解(官方解讀)Docker
- 瞭解JavaScript引擎JavaScript
- JavaScript——深入瞭解thisJavaScript
- 深入瞭解機器學習機器學習
- WebSocket全瞭解Web
- 深入瞭解原型原型
- 瞭解多型多型
- 快速瞭解jQueryjQuery
- 深入瞭解 NSURLSessionSession
- TypeScript初步瞭解TypeScript
- 瞭解SpringSpring
- Docker初步瞭解Docker
- 瞭解微服務微服務
- IIC 波形瞭解
- 瞭解pythonPython
- Bootstrap柵格佈局原始碼解讀boot原始碼
- 瞭解“雲端計算”
- 瞭解HTTP協議HTTP協議
- [譯] 深入瞭解 FlutterFlutter
- Java加密解密瞭解Java加密解密
- 瞭解 OPcache 擴充opcache
- 深入瞭解Synchronized原理synchronized
- WebSocket 簡單瞭解Web
- 瞭解 Android ANRAndroid