今天给各位分享bootstrap期末作业网页的知识，其中也会对web期末作业网站进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、使用bootstrap 如何做自适应的网页，比如一个大图如何适应手机端和pc端
• 2、如何用bootstrap做网站
• 3、如何用bootstrap实现网页的自适应
• 4、bootstrap模态框怎么实现打开一个其他的网页
• 5、如何用 bootstrap 创建一个网站

使用bootstrap 如何做自适应的网页，比如一个大图如何适应手机端和pc端

可以用media query媒体查询来设置不同分辨率下的不同css样式

/* 超小屏幕（手机，小于 768px） */

/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { ... }

给你来一段样例，你看看

@media(min-width: 768px) {

 .ipad

 {

    display: none;

 }

 .mobile

 {

   display: none;

 }

 .pc

 {

   display: block;

 }

 .row {

   margin-left: 0;

   margin-right: 0;

 }

 .home-bg {

   //margin: 0;

   background: url(asset-path("common/home_big3.jpg")) center no-repeat;

   width: 100%;

   height: 500px;

   background-size: cover;

 }

}

@media (max-width: 767px) {

  .ipad

  {

    display: block;

  }

  .mobile

  {

    display: none;

  }

  .pc

  {

    display: none;

  }

  .home-bg {

    background: url(asset_path("common/home_1024.jpg"));

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    //height: 100%;

  }

 }

@media(max-width: 480px) {

  .ipad

  {

    display: none;

  }

  .pc

  {

    display:none;

  }

  .mobile

  {

    display: block;

  }

  .home-bg {

    background: url(asset_path("common/home_640.jpg"));

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    height: 600px;

  }

 }

想必你能理解我的意思

如何用bootstrap做网站

bootstrap只是一个前端框架！

不知你指的做网站，是说bootstrap怎么用？还是想用它来做一个网站，如果是后者，很遗憾告诉你，他只能做静态网页的网站！

如果是前者，你可以到百度bootstrap，到官网去查看教程，很详细，教你怎么调用它！

有问题，欢迎交流。

如何用bootstrap实现网页的自适应

你理解的“自适应”是页面随着屏幕“缩放/zoom”？屏幕缩小，所有

input/button

也成比例缩小？

那不是自适应。试想按钮缩到

5px

宽，用户怎么点啊，那就近乎“不可用”了。

自适应地、在需要的时候换行，就是为了解决“不可用”：1080p

显示器能用，800*600

的爪机仍然能点得中（而不必大范围拖动/scroll）。

结论：换行是正确的表现；如果布局确实需要保证一行，就设置包含这坨控件的容器的最小宽度。

另：建议给按钮们加

icon（如

fontawesome），改善体验，读图比读字消耗的脑细胞少。

将尽可能多的内容、功能挤在一起已经不是最佳实践/潮流了。

bootstrap模态框怎么实现打开一个其他的网页

1、首先在html中导入所需要的库文件，如下图所示，一定注意导入jquery文件。

2、然后在Body区域应用了bootstrap的modal样式，如下图所示。

3、然后在modal样式的div里继续放置内容区域，内容区域的样式为modal-content，如下图所示。

4、然后来看一下内容区分别有三个样式，头尾以及中间部分，接下来定义个按钮，当点击按钮的时候会弹出框，如下图所示。

5、注意一定要指定按钮的data-target属性，如下图所示。

6、最后运行程序以后，会看到如下图所示的内容，这就是bootstrap模态框。

如何用 bootstrap 创建一个网站

您好，如何创建Bootstrap网站和其它网站做法相同，用Bootstrap做好后上传到你购买好的主机上，把域名解析到你的主机就可以了。Bootstrap只不过是一个CSS辅助，或者说他是一个框架而已。他的主要就是节省很多经常用的CSS和代码效果。

关于bootstrap期末作业网页和web期末作业网站的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。