bootstrap手机网站模板（bootstrap购物网站模板）
今天给各位分享bootstrap手机网站模板的知识，其中也会对bootstrap购物网站模板进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
- 1、使用bootstrap 如何做自适应的网页，比如一个大图如何适应手机端和pc端
- 2、求 懂前端的大神：如何用bootstrap框架 写出如下的手机端页面呢？
- 3、如何用bootstrap制作手机网站
- 4、如何修改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填写如下类名
.col-xs-数字 .col-sm-数字 .col-md-数字 .col-lg-数字
bootstrap是12列栅格
xs代表超小屏幕 手机 (768px)
sm小屏幕 平板 (≥768px)
md中等屏幕 桌面显示器 (≥992px)
lg大屏幕 大桌面显示器 (≥1200px)
一行四个数字取3就行了
一行6个数字 取2
以此类推
如何用bootstrap制作手机网站
不可以，bootstrap只是基于jQuery的一种JS框架属于网页开发脚本，不能做APP但是可以做移动端的网页，bootstrap有响应式布局可以再手机、平板和台式端以网页的形式显示。
如何修改bootstrap模板，要实实在在的步骤，
用amaze ui
也是基于bootstrap的UI。比bootstrap功能多，样式好看，一整套中文教程还有模板案例。
至于你一定要说修改bootstrap模板
1：下载模板
2：用谷歌浏览器打开index.html（一般都有这个页面）
3：用谷歌浏览器调试（F12），选中要修改的元素。在调试框右边修改样式。修改好了。就将这个样式单独写一个class赋值上去
bootstrap手机网站模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于bootstrap购物网站模板、bootstrap手机网站模板的信息别忘了在本站进行查找喔。
