Bootstrap的简单使用

1、Bootstrap是什么？

这是Bootstrap官网上对它的描述：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目

2、Bootstrap的使用需求

1.Bootstrap是一个快速开发Web应用程序的前端框架，并且有丰富的组件、插件，可以用于我们快速开发出用户友好的WEB界面

2.支持移动式设备响应，Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面，使其在各个尺寸的屏幕上表现良好。

3、Bootstrap的简单使用案例

以下案例是对公司订餐系统的简单仿写

导航部分代码如下：

<!--nav为Bootstrap的导航组件-->
<nav class="navbar navbar-inverse" style="margin-bottom: 0px;">
<!--container-fluid代表一个占据100%大小的容器 -->
<div class="container-fluid">
<!--navbar-header表示一个导航的头部部分 -->
<div class="navbar-header header">
<!--
                自适应隐藏导航展开按钮
                class="navbar-toggle collapsed"代表折叠的样式
                data-target="#bs-example-navbar-collapse-1"代表折叠的目标，和下面的div中，设置的id="bs-example-navbar-collapse-1"对应
             -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">广州硕星订餐系统</a>
</div>
<!--一定要加上id="bs-example-navbar-collapse-1"属性和上面button的data-target="#bs-example-navbar-collapse-1"属性对应，表示这个div是折叠的目标 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">917<span class="sr-only">(current)</span></a></li>
<li><a href="#">大西豪</a></li>
<li><a href="#">都城</a></li>
<li><a href="#">餐餐乐</a></li>
<li><a href="#">湘语</a></li>
<li><a href="#">邱家</a></li>
<li><a href="#">面点王</a></li>
<li><a href="#">随机</a></li>
<li><a href="#">查看</a></li>
</ul>
<!--
             搜索框，navbar-form表示导航栏的form表单
             -->
<form class="navbar-form navbar-left" role="search" style="margin-left: 300px;">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!--/.collapse-->
</div><!--/.container -->
</nav>

菜单显示部分代码如下：

<!--图片排列利用bootstrap的栅格系统实现-->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="container col-sm-6 col-md-4" style="width: 300px;">
<div class="thumbnail">
<img src="data:images/a.png" class="img-responsive" style="height: 239px;">
<div class="caption">
<p align="center"><strong>尖椒拆骨肉</strong></p>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-3">
<div class="row">
<div class="container col-sm-6 col-md-4" style="width: 300px; ">
<div class="thumbnail">
<img src="data:images/b.png" class="img-responsive" style="height: 239px;">
<div class="caption">
<p align="center"><strong>水煮牛肉</strong></p>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-3">
<div class="row">
<div class="container col-sm-6 col-md-4" style="width: 300px; ">
<div class="thumbnail">
<img src="data:images/c.png" class="img-responsive" style="height: 239px;">
<div class="caption">
<p align="center"><strong>清蒸开屏皖鱼盖浇饭(配蛋脯)
</strong></p>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-3">
<div class="row">
<div class="container col-sm-6 col-md-4" style="width: 300px; ">
<div class="thumbnail">
<img src="data:images/d.png" class="img-responsive" style="height: 239px;">
<div class="caption">
<p align="center"><strong>杭州油淋鸡
</strong></p>
</div>
</div>
</div>
</div>
</div>
</div><!--/.row -->

4、效果

在电脑上显示如图：

在手机端显示的效果如下：