Bootstrap 初写自定义缩略图&如何使用Bootstrap
来源：互联网 发布：淘宝买药审核要多久 编辑：程序博客网 时间：2024/04/28 04:39
一、说在前面
首先说明下这是我第一次用bootstrap框架。所以觉得自己遇到很多坑记录下来
不多说–进主题
二、准备工作
1.准备好jquery-3.1.1.min.js。因为bootstrap是基于jq开发的
2.准备好bootstrap-3.3.7-dist。
3.准备好bootstrap文档
4.准备好你的敲代码神器吧
三、进入IDEA实现导入
说一下具体每个的作用吧
1.css中的bootstrap.css是bootstrap框架的样式boot练习.css是自定义css
2.fonts中的glyphicons是对bootstrap中的字体和小图标实现应用所必须的
3.js中含义主要三个bootstrap.js和jquery-3.1.1.min.js和自定义.js
引入html中的顺序（这里容易用错）
1.css
先引入第三方css再引入自定义css。这样就可以更改部分第三方同类名的css了
2.js
先引入jq再引入bootstrap.js最后引入自定义js
四、基本框架
1.这里container是bootstrap样式中的一个类。使整块内容居中。如果觉得不舒服。可以自定义css更改width
2.col-sm和col-md都是bootstrap中栅格的内容。具体可以看下文档。刚开始我不是用col-sm这些类的，我是用span类。可是一直行不通。后来查了一下，span类只适合bootstrap2的不适合3。
五、每个缩略图中内容
<div class="col-sm-6 col-md-4"> <div class="media-box"> <img src="1.jpg" class="img-zi"> </div> <div class="content-box"> <h2>许林杰哈哈哈</h2> <span> <a href="#" > <img src="Image%201.png" class="img-circle" title="许林杰"> </a> </span> <time>2017-05-05</time> <span>XuLinJie_</span> <div class="btn-group pull-right"> <a href="#" class="btn btn-success btn-xs" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="laoreet rutrum faucibus." id="ps"><i class="glyphicon glyphicon-print"></i></a> <a href="#" class="btn btn-success btn-xs" data-trigger="hover" data-toggle="s" data-placement="top" data-content="laoreet rutrum faucibus."><i class="glyphicon glyphicon-comment"></i></a> </div> </div></div>
首先插入图片
对图片进行超出范围隐藏设置和包含图片框架大小设置
h2标题，头像，日期，姓名
可以看出头像是圆形。bootstrap文档中有相关类即img-circle
按钮设置，触及按钮即有弹出框（js）
先设置按钮，以类btn为主要部分
再设置点击按钮出现弹出框
<a href="#" class="btn btn-success btn-xs" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="laoreet rutrum faucibus.">data-toggle代表设置这个名字，后面自定义js直接找到这个名字。data-placement代表弹出框出现在上下左右哪个方向。data-content代表弹出框中的内容
js代码
$(function () { $("[data-toggle='popover']").popover(); $("[data-toggle='s']").popover();})点击后会出现弹出框完成后，接下来是触及马上出现弹出框，只需要加data-trigger
源码
HTML源码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/boot练习.css"> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/自定义.js"></script></head><body> <nav class="navbar navbar-inverse"> <div class="container"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </nav> <div id="main-content"> <div class="container"> <div class="box"> <div class="col-sm-6 col-md-4"> <div class="media-box"> <img src="1.jpg" class="img-zi"> </div> <div class="content-box"> <h2>许林杰哈哈哈</h2> <span> <a href="#" > <img src="Image%201.png" class="img-circle" title="许林杰"> </a> </span> <time>2017-05-05</time> <span>XuLinJie_</span> <div class="btn-group pull-right"> <a href="#" class="btn btn-success btn-xs" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="laoreet rutrum faucibus.">x<i class="glyphicon glyphicon-print"></i></a> <a href="#" class="btn btn-success btn-xs" data-trigger="hover" data-toggle="s" data-placement="top" data-content="laoreet rutrum faucibus."><i class="glyphicon glyphicon-comment"></i></a> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="media-box"> <img src="1.jpg" class="img-zi"> </div> <div class="content-box"> <h2>许林杰哈哈哈</h2> <span> <a href="#" > <img src="Image%201.png" class="img-circle" title="许林杰"> </a> </span> <time>2017-05-05</time> <span>XuLinJie_</span> <div class="btn-group pull-right"> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="laoreet rutrum faucibus." id="ps"><i class="glyphicon glyphicon-print"></i></a> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="s" data-placement="top" data-content="laoreet rutrum faucibus."><i class="glyphicon glyphicon-comment"></i></a> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="media-box"> <img src="1.jpg" class="img-zi"> </div> <div class="content-box"> <h2>许林杰哈哈哈</h2> <span> <a href="#" > <img src="Image%201.png" class="img-circle" title="许林杰"> </a> </span> <time>2017-05-05</time> <span>XuLinJie_</span> <div class="btn-group pull-right"> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="laoreet rutrum faucibus." id="ps"><i class="glyphicon glyphicon-print"></i></a> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="s" data-placement="top" data-content="laoreet rutrum faucibus."><i class="glyphicon glyphicon-comment"></i></a> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="media-box"> <img src="1.jpg" class="img-zi"> </div> <div class="content-box"> <h2>许林杰哈哈哈</h2> <span> <a href="#" > <img src="Image%201.png" class="img-circle" title="许林杰"> </a> </span> <time>2017-05-05</time> <span>XuLinJie_</span> <div class="btn-group pull-right"> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="laoreet rutrum faucibus." id="ps"><i class="glyphicon glyphicon-print"></i></a> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="s" data-placement="top" data-content="laoreet rutrum faucibus."><i class="glyphicon glyphicon-comment"></i></a> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="media-box"> <img src="1.jpg" class="img-zi"> </div> <div class="content-box"> <h2>许林杰哈哈哈</h2> <span> <a href="#" > <img src="Image%201.png" class="img-circle" title="许林杰"> </a> </span> <time>2017-05-05</time> <span>XuLinJie_</span> <div class="btn-group pull-right"> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="laoreet rutrum faucibus." id="ps"><i class="glyphicon glyphicon-print"></i></a> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="s" data-placement="top" data-content="laoreet rutrum faucibus."><i class="glyphicon glyphicon-comment"></i></a> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="media-box"> <img src="1.jpg" class="img-zi"> </div> <div class="content-box"> <h2>许林杰哈哈哈</h2> <span> <a href="#" > <img src="Image%201.png" class="img-circle" title="许林杰"> </a> </span> <time>2017-05-05</time> <span>XuLinJie_</span> <div class="btn-group pull-right"> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="popover" data-placement="top" data-content="laoreet rutrum faucibus." id="ps"><i class="glyphicon glyphicon-print"></i></a> <a href="#" class="btn btn-success btn-xs" rel="popover" data-trigger="hover" data-toggle="s" data-placement="top" data-content="laoreet rutrum faucibus."><i class="glyphicon glyphicon-comment"></i></a> </div> </div> </div> </div> </div> </div></body></html>js自定义源码
$(function () { $("[data-toggle='popover']").popover(); $("[data-toggle='s']").popover();})css自定义源码
.img-zi { width: 350px;}.content-box{ border: 1px solid #5e5e5e; border-top: none; padding: 1px; margin-bottom: 20px;}.content-box h2{ font-size: 15px; line-height: 30px; font-family: 微软雅黑; margin-top: 0px;}.content-box span,.content-box time{ margin-right: 10px; color: #828282;}.content-box img { width: 32px;}#main-content{ margin: 20px 0px;}.media-box{ height: 260px; overflow: hidden;}粗略效果
1 0
- Bootstrap 初写自定义缩略图&如何使用Bootstrap
- BootStrap 缩略图
- bootstrap-缩略图
- Bootstrap缩略图
- Bootstrap 缩略图
- Bootstrap 缩略图
- Bootstrap缩略图
- bootstrap缩略图
- bootstrap 如何自定义按钮
- 如何开始使用bootstrap
- 如何使用 bootstrap
- Bootstrap 研究 ---自定义Bootstrap
- Bootstrap学习：缩略图
- Bootstrap缩略图thumbnail
- Bootstrap缩略图样式使用方法
- Bootstrap 缩略图和警告
- bootstrap学习21--缩略图
- Bootstrap中缩略图
- Android Studio插件整理
- TDDI/ITD原理总结-----/*自己总结*/
- xml 转为数组
- android 热更新的实现
- dpdk-16.04 — eal初始化代码分析
- Bootstrap 初写自定义缩略图&如何使用Bootstrap
- 仿ListView源码添加ReCycleView头部和底部ItemView的功能
- codeforces 617E XOR and Favorite Number
- Python连接mysql数据库
- 史上最全最细最直接解析IOS事件传递机制
- Android-打开相册选择单张图片
- Linux系统中用户切换
- cxf webservice 配置
- c++实验5—项目5：求和
