内容简介:bootstrap官网:bootstrap4文档:bootstrap3文档:
网址
bootstrap官网: https://getbootstrap.com
bootstrap4文档: https://getbootstrap.com/docs
bootstrap3文档: https://getbootstrap.com/docs/3.3/
安装bootstrap css
使用bootstrap方式:
<!DOCTYPE html> <html> <head> <title>BootStrap</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-primary">Primary</button> </body> </html>
方式2:下载源文件,并link
<link rel="stylesheet" type="text/css" href="bootstrap.css">
实验
1、实验jumbotron
2、实验多行表单与form-inline一行表单
form-group添加一些属性
form-control让输入框扩展一行显示
<!DOCTYPE html> <html> <head> <title>BootStrap</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="bootstrap.css"> </head> <body> <div class = "container"> <button type="button" class="btn btn-primary">Primary</button> <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </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> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form> </div> </body> </html>
导航栏
第一步,添加前方navbar-header头部
<!DOCTYPE html> <html> <head> <title>BootStrap</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="bootstrap.css"> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> </div> </div> </body> </html>
第2步,添加导航栏菜单navbar-nav
<!DOCTYPE html> <html> <head> <title>BootStrap</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> </div> <ul class="nav navbar-nav"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Login</a></li> </ul> </div> </body> </html>
菜单栏的缩放
需要使用js,带入bootstrap js
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
bootstrap js需要jquery
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
header内添加 缩放button
属性 data-target="#bs-nav-demo" 意味着点击缩放按钮,显示id为bs-nav-demo的菜单内的内容
<!DOCTYPE html> <html> <head> <title>BootStrap</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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> <ul class="nav navbar-nav"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Login</a></li> </ul> </div> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
在nav-bar中添加id为bs-nav-demo的div。 意味着缩小屏幕会隐藏内部的内容。点击后会显示。
<!DOCTYPE html> <html> <head> <title>BootStrap</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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> <div class="collapse navbar-collapse" id="bs-nav-demo"> <ul class="nav navbar-nav"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Login</a></li> </ul> </div> </div> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
gird系统
将一个区域分为了12个块。 break-point:
极小屏幕:.col-xs- 小屏幕:.col-sm- 中屏幕:.col-md- 大屏幕:.col-lg-
小屏幕不设置,默认是占满,大屏幕不设置默认和最近的小屏幕的规则相同。
<!DOCTYPE html> <html> <head> <title>BootStrap</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style type="text/css"> .pink { background: pink; border: 1px solid purple; } .orange { background: orange; border: 1px dashed red; height: 50px; } </style> </head> <body> <!-- 大屏幕每个占1份, 中屏幕每个占2份。 小屏幕每个占4份,极小屏幕没有设置时,默认是占满。 --> <div class="row"> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> <div class="col-lg-1 col-md-2 col-sm-4 pink">COL LG 1</div> </div> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
##grid嵌套
<!DOCTYPE html> <html> <head> <title>BootStrap</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style type="text/css"> .pink { background: pink; border: 1px solid purple; } .orange { background: orange; border: 1px dashed red; height: 50px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 pink"> <div class="row"> <div class="col-lg-6 orange">FIRST HALF</div> <div class="col-lg-6 orange">OTHER HALF</div> </div> </div> <div class="col-md-3 col-sm-6 pink">TOUR DATE!</div> <div class="col-md-3 col-sm-6 pink">TOUR DATE!</div> <div class="col-md-3 col-sm-6 pink"> <div class="row"> <div class="col-lg-2 orange"></div> <div class="col-lg-2 orange"></div> <div class="col-lg-2 orange"></div> <div class="col-lg-2 orange"></div> <div class="col-lg-2 orange"></div> <div class="col-lg-2 orange"></div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
以上所述就是小编给大家介绍的《bootstrap3-安装》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Golang入门:从安装、部署以及GoLand的安装开始
- Win2016上安装SFB2015先决条件安装失败:RewriteModule
- mac:Go安装和配置+GoLand安装和使用之完整教程
- Pulsar本地单机(伪)集群 (裸机安装与docker方式安装) 2.2.0
- 如何将Rancher 2.1.x 从单节点安装迁移到高可用安装
- (教科书式教程!)在VMware Workstation 14 上安装CentOS 7 【送安装包】
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Growth Hack 這樣做
Xdite / PCuSER電腦人文化 / 2016-5-7 / 300.00台幣
◎具體教你在預算有限的情況之下,把成長做出來的可行與必要方法! ◎帶動台灣成長駭客話題的專業講師,親授讓產品突破80分的成長秘笈 @這本書要給誰看? 1. 創業者、個人品牌經營者,想要提高自己服務轉換率的人。 2. 空有產品,但是賣不出去,花了錢投廣告卻效果低落的人。 @這本書有什麼不一樣? 1.全球最重要的趨勢,台灣最知名的 Growth Hack 講師 Xd......一起来看看 《Growth Hack 這樣做》 这本书的介绍吧!