bootstrap3-安装

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Programming Python

Mark Lutz / O'Reilly Media / 2006-8-30 / USD 59.99

Already the industry standard for Python users, "Programming Python" from O'Reilly just got even better. This third edition has been updated to reflect current best practices and the abundance of chan......一起来看看《Programming Python》这本书的介绍吧!

码农工具

XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换

HEX HSV 转换工具

HEX HSV 互换工具