网上搜了一堆所谓自己写的bootstrap4标签页都是扯淡的,一个都用不了。怎么办好呢?
贴出你的代码
框架用Bootstrap上有相应的源码,里面的样式需要自己写才能满足甲方dad
<ul class="nav nav-tabs" role="tablist" id="myTab"> <li class="active"><a href="#home" role="tab" data-toggle="tab">第一项</a></li> <li><a href="#profile" role="tab" data-toggle="tab">第二项</a></li> <li><a href="#messages" role="tab" data-toggle="tab">第三项</a></li> <li><a href="#settings" role="tab" data-toggle="tab">第四项</a></li>
代码贴出来看下
这个好像是网上有类名,具体的我也不知道,,,,可以问身边会前端的朋友
这是自适应
加样式:
#tab a:link{ text-decoration: none; outline: none; }
即可
data-toggle="tab" 是指tab这个元素 触发什么事件
role="tab" 是类似一个定义的标签 告诉你这个东西是tab 方便看懂代码 (可以删除)
上传了呀,直接下载素材就行了
我html文档中写了active,但是浏览器加载后默认没有active,所以默认情况下就不显示第一页内容。
你用栅栏布局了没有?
<div class='col-md-7><img src='#'></div> :这里是图片
<div class='col-md-5><p>这里是文本</p></div>
哦 知道了 既然不是网站上有的就可以了,我下次也写好了保存着。非常感谢!
可以提前准备一个lg-img。点击缩略图后倒入
可以在顶部添加一个锚点<a name="top"></a>
从第二个开始这种<div class="tab-pane active" ...>中active都要去掉
而且我调整图片尺寸也没用,我将几个logo的尺寸都调整为了500*500像素甚至是800*800像素,但是在页面里体现的依然是个小图标
http://www.runoob.com/bootstrap/bootstrap-labels.html去这个看。很全的,我也是刚发现的
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">工程进度</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<button type="button" class="btn btn-primary btn-xs">水井挖掘工程</button>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
<button type="button" class="btn btn-danger btn-xs">基建工程</button>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</ul>
</div>
</div>