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

查看所有标签

猜你喜欢:

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

码农书籍

数据结构

殷人昆 / 清华大学 / 2007-6 / 39.00元

《数据结构》(第2版)“数据结构”是计算机专业的核心课程，是从事计算机软件开发和应用人员必备的专业基础。随着计算机的日益普及，“数据结构”课程也在不断地发展。《数据结构》(第2版)按照清华大学计算机系本科“数据结构”大纲的要求，从面向对象的概念、对象类设计的风格和数据结构的层次开始，从线性结构到非线性结构，从简单到复杂，深入地讨论了各种数据结构内在的逻辑关系及其在计算机中的实现方式和使用。此外，对......一起来看看《数据结构》这本书的介绍吧!

码农工具

bootstrap3-安装

网址

安装bootstrap css

实验

导航栏

菜单栏的缩放

gird系统

数据结构

HTML 压缩/解压工具

HTML 编码/解码

MD5 加密