美文网首页
简单的Bootstrap使用

简单的Bootstrap使用

作者: 留下的是物离开的是人 | 来源:发表于2017-12-16 16:40 被阅读0次

1使用bootstorp 必须先下载引用  里面有 css img js类库  然后导入工程

2.如果想搭出什么样的样式。。就到http://www.bootcss.com上面查看,找到你想要的效果,然后记住类名,然后再工程里面引用类名就可以了

*****  因为有两个版本  一旧一新   所有有时候出不来效果时把版本换一下  ******

3.图标:必须把图片导入工程img 里面  -->直接在图片获取所用图片的位置    。可直接根据类名获取到图片上的任意图标

搭页面:注意JS的类库必须在bootstrap的前面

先导入类库  三个

<link rel ="stylesheet" href="css/bootstrap.min.css" />

<script type="text/javascript" src="js/juqery-1.11.0.min.js"></script>

<script  type="js/bootstrap.min.js"></script>

然后就可以开始打页面效果了;

小练习:现代浏览器博物馆     整体效果可直接在现代浏览器博物馆官方查看

1:效果图:

参考代码


2:效果图(5张图片轮播)

参考代码

3:效果图

参考代码:

4:效果图:

参考代码:

然后用一个大的div 标签把这些代码都框住。快速简单美观的一个页面就搭出来了

相关文章

  • Flask 实现导航栏

    使用 Bootstrap 使用 Bootstrap 实现导航非常简单。鉴于前台界面的导航并不在 Flask 技术体...

  • 简单的Bootstrap使用

    1使用bootstorp 必须先下载引用 里面有 css img js类库 然后导入工程 2.如果想搭出什么样的样...

  • Bootstrap相关

    1.Bootstrap 样式之 响应式图片的处理 响应式图片处理 在bootstrap中如何使用响应式图片? 简单...

  • Django bootstrap基本页面的搭建

    目的 上一篇很简单讲了如何在Django中使用bootstrap。这一次,大概会说说自己使用bootstrap做B...

  • 我为什么讨厌bootstrap?

    我一直在使用 Bootstrap。当时 Bootstrap 是一种设置响应式网站的简单方法。而且,由于他们提供的样...

  • W2

    Bootstrap布局的使用 bootstrap十分使用,用bootstrap所提供的class类,能够极大程度上...

  • Bootstrap 的简单使用-栅格系统

    写在前面 最近在学习了写前端页面,其中使用了 Bootstrap 的前端框架,感觉非常好用。Bootstrap 来...

  • 基于Servlet的小区物业管理系统

    该项目基于采用MVC模式,同时使用Servlet技术搭建而成,前台主要使用bootstrap框架,界面简单,清晰美...

  • Bootstrap 模态框多次显示后台会提交多次BUG

    模态框 Bootstrap Modal Bootstrap 的模态框使用 Bootstrap 的前端应该都接触过。...

  • 2018-10-08Bootstrap02

    Bootstrap 排版 Bootstrap 使用 Helvetica Neue、 Helvetica、 Aria...

网友评论

      本文标题:简单的Bootstrap使用

      本文链接:https://www.haomeiwen.com/subject/tngswxtx.html