tnblog
首页
视频
资源
登录
愿你出走半生,归来仍是少年
排名
3
文章
317
粉丝
22
评论
14
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以,多总结一点
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

bootstrap 栅格布局一小例子

5249人阅读 2019/7/18 14:48 总访问:2161112 评论:1 收藏:0 手机
分类: 前端


效果很简单,就是显示一个头像与一个名字

html:

  1.     <div class="col-md-12" style="margin-top: 20px">
  2.         <div class="row">
  3.             @for (int i = 0; i 6i++)
  4.             {
  5.                  <div class="col-md-2 col-sm-2 col-xs-5">
  6.                     <div  class="focus_box">
  7.                         <a href="#" style="text-decoration: none">
  8.                             <div class="focus_img">
  9.                                 <img class="circleimg" src="http://www.tnblog.net/userdata/heads/dbc68332d521436c983fbc3adc6d9c7f.jpeg"/>
  10.                             </div>
  11.                             <div class="foucs_introduce">
  12.                                 小可爱
  13.                             </div>
  14.                         </a>
  15.                     </div>
  16.                 </div>
  17.             }   
  18.         </div>
  19.     </div>

css:

  1. <style>
  2.     .circleimg {
  3.         width68px;
  4.         height68px;
  5.         margin-top23px;
  6.         border-radius50% !important;
  7.     }
  8.     .focus_box {
  9.         height160px;
  10.         background#fff;
  11.     }
  12.     .focus_img {
  13.         height100px;
  14.         text-align: center;
  15.     }
  16.     .foucs_introduce {
  17.         margin-top6px;
  18.         text-align: center;
  19.         color#666;
  20.     }
  21. </style>

样式写得不好,真实点的数据:






欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

剑轩

2019/8/7 16:17:49

后端写样式有点痛苦哇

bootstrap单选框重叠问题

从bootstrap模板中复制出来就有两个重叠的现象 看源码是生成了两次 重复生成了,所以boostrap那个模板中页面也...

bootstrap文字居中问题

静态页上面的效果是这样的可以看到文字和左边的下拉列表是居中的但是如果你直接复制过去可能就是这样的了我们来看看静态页...

bootstrap动态生成的单选框复选框等无法点击选中的问题

bootstrap的单选框、复选框是要经过渲染的,然后才显示出来的经过渲染的是这样的没有经过渲染的就是最原始的样子所以它的选...

bootstrap内容灰白背景

其实就是page-container-bg-solid 样式加上右边内容就有灰色的背景效果如下如果不加就是全白的背景、如果需要根据不同的内...

bootstrap分页条样式

其实就是一个pagination即可&lt;divclass=&quot;dataTables_paginatepagination&quot;&gt; &lt;ulid=&quot;pagination&quo...

bootstrap模板 form的一点布局用法

bootstrap form的布局可以在form stuff里边看到,我们就复制form layouts里边的吧复制这里的我们实现一个简单的资源上传的页...

ASP.NET MVC + WebUploader+bootstrap实现文件上传进度条显示

引入需要的资源文件:&lt;scriptsrc=&quot;~/Content/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt; &lt;linkhref=&quot;...

bootstrap中的dataTables

就是这种直接支持页面分页,排序,搜索什么的注意需要相关的js和样式然后js把表格变成dataTable就可以了Bootstrap模板中使...

bootstrap 勾选不需要的列并记住状态

最近有个需求是要求记住这些没打勾的列因为不需要展示本来想建表去做一个状态选择,但是太麻烦了,会出现加载过慢的情况,...

bootstrap实现一个简单的图书显示

效果如下:代码:代码:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;/&gt; &lt...

bootstrap cdn地址

https://www.bootcdn.cn/simple-line-icons

bootstrap metronic模板中的一些页面固定菜单等

这个可以看到上边的一点菜单这种效果还是可以这个可以让左边的菜单支持滚动,但是好像效果并不是很好一样要实现整个菜单固...

bootstrap div垂直居中

code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;vi...

bootstrap表格样式

1、table-striped:斑马线表格2、table-bordered:带边框的表格3、table-hover:鼠标悬停高亮的表格前面三种组合在一起大概...

bootstrap一个不错的树形组件

先看看效果嘛,还是有点乖的,功能也算是比较强大,支持右键菜单,支持随意拖动。哈哈哈长得好看,还有内涵html:其实除了引...