功能强大的Bootstrap使用手册（一）

前端技术 2023/09/05 JavaScript

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式
现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西

1.编写头部

<head>
 <meta charset=\"UTF-8\">
 <!--为了让ie采用最新的渲染模式，要把这个标签添加上-->
 <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
 <!--针对响应式布局，首先获取设备的物理宽度，根据设备物理宽度设置网页宽度，按照1:1缩放-->
 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
 <title>LearnBootstrap</title>
 <!--直接引用文件-->
 <link rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap.min.css\">
 <!--引用cdn地址-->
 <link rel=\"stylesheet\" href=\"//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css\">

 <!--为了支持ie9以下，要加上这些-->
 <!--[if lt IE 9]>
 <!--让他支持h5标签-->
 <script src=\"https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js\"></script>
 <!--让他支持媒体查询，也就是响应式-->
 <script src=\"https://oss.maxcdn.com/respond/1.4.2/respond.min.js\"></script>
 <!--[endif]-->
</head>

2.引入js

这个可以写在body

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src=\"//cdn.bootcss.com/jquery/1.11.3/jquery.min.js\"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src=\"//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js\"></script>

3.使用container类
container类是一个常用的div类
主要是用居中功能

<div class=\"container\">hello</div>

4.使用栅格化系统

栅格化系统是BootStrap一个非常常用的一个布局系统
简单的使用如下

<div class=\"row\">
 <!--xs表示在手机上，sm表示在平板上，md表示在桌面上。后面的数字表示占多少列，满屏为12列-->
 <!--内容超过栅格高度，则会增加高度，不会增加宽度-->
 <!--offset表示向右移动几列-->
 <div class=\"col-xs-12 col-sm-6 col-md-8 col-md-offset-4\">.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8</div>
 <div class=\"col-xs-6 col-md-4\">.col-xs-6 .col-md-4</div>
</div>

<div class=\"row\">
 <!--push向后移动，pull向前移动-->
 <div class=\"col-xs-12 col-sm-6 col-md-8 col-md-push-4\">.col-xs-12 .col-sm-6 .col-md-8</div>
 <div class=\"col-xs-6 col-md-4 col-md-pull-8\">.col-xs-6 .col-md-4</div>
</div>

可以看到栅格化系统可以根据不同设备调整不同宽度

5.使用表格

<div class=\"container\">
 <!--响应式表格，内容太长可以左右移动-->
 <div class=\"table-responsive\">
 <!--table 后几个分别是表格有边框，鼠标经过tbody行时颜色加深，表格紧缩-->
 <table class=\"table table-bordered table-hover table-condensed\">
  <thead>
  <tr>
  <th>表格标题</th>
  <th>表格标题</th>
  <th>表格标题</th>
  </tr>
  </thead>
  <tbody>
  <!--该行颜色为浅绿-->
  <tr class=\"success\">
  <th>表格内容</th>
  <th>表格内容</th>
  <th>表格内容</th>
  </tr>
  <!--该行颜色为浅蓝-->
  <tr class=\"info\">
  <th>表格内容</th>
  <th>表格内容</th>
  <th>表格内容</th>
  </tr>
  <!--该行颜色为米白-->
  <tr class=\"warning\">
  <th>表格内容</th>
  <th>表格内容</th>
  <th>表格内容</th>
  </tr>
  </tbody>
 </table>
 </div>
</div>

如果是想某一格变颜色也可以在th标签内加类像tr一样

6.使用表单

最基本的用法如下

<div class=\"container\">
 <form>
 <!--的部分项是一个form-group的父布局，里面有label和input-->
 <div class=\"form-group\">
  <!--label的for要和input的id对应-->
  <label for=\"exampleInputEmail1\">Email address</label>
  <!--input的class要设为form-control-->
  <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>
</div>

如果将form的类设为form-inline则将所有元素显示在同一行

如果将form的类设为form-horizontal则每个form-group显示一行，不过要自己设置宽度
如

<div class=\"container\">
 <!--让每一个form-group显示一行，不过每个form-group的子项都要规定宽度-->
 <form class=\"form-horizontal\">
 <div class=\"form-group\">
  <label for=\"Emai\" class=\"col-md-2 control-label\">Email</label>
  <!--input-group让提示和补充显示在同一行-->
  <div class=\"col-md-10\">
  <input class=\"form-control\" type=\"email\" placeholder=\"Email\" id=\"Emai\">
  </div>
 </div>
 <div class=\"form-group\">
  <label for=\"Passwor\" class=\"col-sm-2 control-label\">Password</label>
  <div class=\"col-sm-10\">
  <input class=\"form-control\" type=\"password\" placeholder=\"Password\" id=\"Passwor\">
  </div>
 </div>
 <button type=\"submit\" class=\"btn btn-primary col-md-offset-2\">summit</button>
 </form>
</div>

我们通常在注册账号时，信息错误或者正确他会在旁边提示，而且输入框的颜色会不同
Bootstrap给我们提供了这个很实用的功能

<div class=\"container\">
 <form>
 <!--父div的类要增加两项-->
 <!--成功状态-->
 <div class=\"form-group has-success has-feedback\">
  <label class=\"control-label\" for=\"inputSuccess2\">Input with success</label>
  <input type=\"text\" class=\"form-control\" id=\"inputSuccess2\" aria-describedby=\"inputSuccess2Status\">
  <!--右边的图标-->
  <span class=\"glyphicon glyphicon-ok form-control-feedback\" aria-hidden=\"true\"></span>
  <!--这个信息隐藏，增加了代码的可读性-->
  <span id=\"inputSuccess2Status\" class=\"sr-only\">(success)</span>
 </div>
 <!--警告状态-->
 <div class=\"form-group has-warning has-feedback\">
  <label class=\"control-label\" for=\"inputWarning2\">Input with warning</label>
  <input type=\"text\" class=\"form-control\" id=\"inputWarning2\" aria-describedby=\"inputWarning2Status\">
  <span class=\"glyphicon glyphicon-warning-sign form-control-feedback\" aria-hidden=\"true\"></span>
  <span id=\"inputWarning2Status\" class=\"sr-only\">(warning)</span>
 </div>
 <!--错误状态-->
 <div class=\"form-group has-error has-feedback\">
  <label class=\"control-label\" for=\"inputError2\">Input with error</label>
  <input type=\"text\" class=\"form-control\" id=\"inputError2\" aria-describedby=\"inputError2Status\">
  <span class=\"glyphicon glyphicon-remove form-control-feedback\" aria-hidden=\"true\"></span>
  <span id=\"inputError2Status\" class=\"sr-only\">(error)</span>
 </div>
 </form>
</div>

7.按钮

按钮是必不可少的一样东西

<!-- 白色背景 -->
<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-primary btn-lg\">（大按钮）Large button</button>
 <button type=\"button\" class=\"btn btn-primary\">（默认尺寸）Default button</button>
 <button type=\"button\" class=\"btn btn-primary btn-sm\">（小按钮）Small button</button>
 <button type=\"button\" class=\"btn btn-primary btn-xs\">（超小尺寸）Extra small button</button>

以上就是Bootstrap的使用步骤和常用用法
用上这个框架后不仅开发的速度上去了，质量也提升了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/13847

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案