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

2024-05-06 14:53:57

字体：大中小

来源：转载

供稿：网友

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="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://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>

上一篇：AngularJS基础 ng-model-options 指令简单示例

下一篇：javascript将中国数字格式转换成欧式数字格式的简单实例