目前最受欢迎的前端框架：BootStrap

程序员文章站 2022-05-26 17:53:39

...

概念

Bootstrap是一个前端开发的框架，来自 Twitter，是目前最受欢迎的前端框架。它基于 HTML、CSS、JavaScript ，具有简洁、直观、强悍的优点，使得 Web 开发更加快捷。

优势

响应式设计，能够自适应于台式机、平板电脑、手机，确保了适当的绘制和触屏缩放，同时可以设置禁止缩放功能，使网站看上去感觉更像原生应用。
包含了功能强大的内置组件（css样式和js插件），我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。

快速入门

下载Bootstrap框架

Bootstrap官网下载
将Bootstrap框架引入项目

直接将解压后的文件复制进项目即可
HTML文件模板

任何bootstrap页面都是基于这样的一个模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>

<!-- 下面的3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

  </head>
  <body>
    <h1>你好，世界！</h1>

  </body>
</html>

响应式布局

响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
响应式布局的实现，依赖于栅格系统。

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

栅格系统，简单来说，就是将页面一行平均分成12个格子，根据不同的终端对元素设定不同的格子。

在PC端每张图片设定占4个格子，那么PC端页面每一行显示3张图片
在平板电脑每张图片设定占6个格子，那么平板电脑端页面每一行只显示2张图片。
在手机端每张图片设定占12个格子，那么手机端页面每一行则只显示1张图片。

步骤

定义容器
- container（固定宽度）
- container-fluid（100% 宽度）
定义行
- row
定义元素
- col-设备代号-格子数目
设备代号
- xs 超小屏幕手机 (<768px)
- sm 小屏幕平板 (≥768px)
- md 中等屏幕桌面显示器 (≥992px)
- lg 大屏幕大桌面显示器 (≥1200px)
注意
- 如果设定的格子数目超过12，超出部分自动换行。
- 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
- 栅格类属性可以向上兼容。
  - 只设定手机端图片占4个格子，那么手机端、平板端和PC端页面每行都显示3张图片。

案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- 定义了div的边框 -->
    <style>
        .inner{
            border: 1px solid #1c7430 ;
        }
    </style>

</head>
<body>
	 <!-- 定义容器 -->
    <div class="container-fluid">
    	 <!-- 定义行 -->
        <div class="row">
        	 <!-- 定义元素 -->
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
            <div class="col-lg-1 col-md-2 col-sm-4 col-xs-6 inner">栅格</div>
        </div>
    </div>
</body>
</html>

CSS样式

按钮

预定样式

	<button type="button" class="btn btn-default">（默认样式）Default</button>
	
	<button type="button" class="btn btn-primary">（首选项）Primary</button>
	
	<button type="button" class="btn btn-success">（成功）Success</button>
	
	<button type="button" class="btn btn-info">（一般信息）Info</button>
	
	<button type="button" class="btn btn-warning">（警告）Warning</button>
	
	<button type="button" class="btn btn-danger">（危险）Danger</button>
	
	<button type="button" class="btn btn-link">（链接）Link</button>

尺寸

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

图片

图片在任意尺寸都占100%

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

表格

表格实例

<table class="table">
  ...
</table>

条纹状表格

<table class="table table-striped">
  ...
</table>

带边框的表格

<table class="table table-bordered">
  ...
</table>

鼠标悬停

<table class="table table-hover">
  ...
</table>

响应式表格

<div class="table-responsive">
<table class="table">
  ...
</table>
</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-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

组件

导航条

导航条实例

	<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">
	        <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>

反色的导航条

	 <nav class="navbar navbar-inverse">
	   ...
	 </nav>

分页条

分页条实例

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

插件

Carousel（轮播图）

轮播图实例

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

目前最受欢迎的前端框架：BootStrap

概念

优势

快速入门

下载Bootstrap框架

将Bootstrap框架引入项目

HTML文件模板

响应式布局

栅格系统

步骤

定义容器

定义行

定义元素

设备代号

注意

案例

CSS样式

按钮

预定样式

尺寸

图片

图片在任意尺寸都占100%

图片形状

表格

表格实例

条纹状表格

带边框的表格

鼠标悬停

响应式表格

表单

表单实例

水平排列的表单

组件

导航条

导航条实例

反色的导航条

分页条

分页条实例

插件

Carousel（轮播图）

轮播图实例

在Bootstrap开发框架的前端视图中使用@RenderPage实现页面内容模块化的隔离，减少复杂度

分享15个最受欢迎的Python开源框架

电脑固态硬盘什么牌子好？目前最受欢迎的固态硬盘是哪几款产品？

Bootstrap一款超好用的前端框架

外媒评目前能买的最好手机：一加7 Pro安卓最佳 最受欢迎竟是它

Github上最受欢迎的Python轻量级框架Flask入门！史上最详细教程

2020拍照软件排行榜最流行（目前最受欢迎的10大拍照软件）

10个最受欢迎的 JavaScript框架(推荐)

分享最受欢迎的5款PHP框架

[集成框架]基于VueCli3的微信公众号项目前端框架

外媒评目前能买的最好手机：一加7 Pro安卓最佳最受欢迎竟是它