bootstrap3-安装

栏目: CSS · CSS3 · 发布时间: 6年前

内容简介：bootstrap官网：bootstrap4文档：bootstrap3文档:

网址

bootstrap官网： https://getbootstrap.com

bootstrap4文档： https://getbootstrap.com/docs

bootstrap3文档: https://getbootstrap.com/docs/3.3/

安装bootstrap css

使用bootstrap方式：

方式1：链接外部库

https://www.bootstrapcdn.com/legacy/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-安装》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

What Technology Wants

Kevin Kelly / Penguin Group (USA) Incorporated / 2010-10-14 / USD 27.95

A refreshing view of technology as a living force in the world. This provocative book introduces a brand-new view of technology. It suggests that technology as a whole is not a jumble of wires and ......一起来看看《What Technology Wants》这本书的介绍吧!

码农工具

JSON 在线解析

在线 JSON 格式化工具

HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具

HEX HSV 互换工具