bootstarp基本使用

Bootstrap的使用一般有两种方法。一种是引用在线的Bootstrap的样式,一种是将Bootstrap下载到本地进行引用。

bootsrap在线地址 http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css

也可以到官网下载最新版,目录结构,在html中引入bootstrap.min.css,即可

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

例子:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="./bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type=‘text/css‘>
      body {
        background-color: #CCC;
      }
    </style>
    </head>
    <body>
        <h1>hello Bootstrap<h1>
    </body>
</html>
更多请点击查看  Bootstarap菜鸟教程下载地址   http://getbootstrap.com/
时间: 2024-10-08 14:59:58

bootstarp基本使用的相关文章

bootstarp 样式细节(tooltip布局)

在写bootstarp中发现的几个小样式问题,记录以后可能用的到 1.有时候我们想要超过td长度后自动显示省略号,我们会使用 table { table-layout: fixed; } table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 这样在使用tooltip时就会出现布局出差的情况. 添加 /*处理tooltip被上属性影响*/ .tooltip-inner { white-space:

bootstarp modal自动调整宽度的JS代码

$('#ajaxPage').modal('show').css({ width: 'auto', 'margin-left': function () { return -($(this).width() / 2); } }); 可以自动调整modal对象的宽度,并且绝对居中bootstarp modal自动调整宽度的JS代码,布布扣,bubuko.com

一步一步实现MVC5+EF6+Bootstarp+Autofac+NoSql实现OADemo 之登陆(一) 验证码 Captcha 之大插件小用

不知何年何月才能完成OADemo啊,总之还是一步一步来吧,这段时间开始着手了,先做登陆.  前段时间研究了一下在CentOS7下安装Mysql和Memcached服务,并测试了用C#操作,结果还行. 今天做一个简单的基于Bootstarp的响应式登陆页面(其实是在网上下的模板),不管是登陆还是注册吧,都会用到验证码,以前是用GDI绘出来的,觉得太丑了,百度的关于.net的验证码绝大多数也是用的这种方法,最后试了一下captcha,觉得还挺好看的,所以就试着用用. nugit控制台install-

MVC5+EF6+Bootstarp+Autofac+NoSql实现OADemo 之登陆(一) 验证码 Captcha 之大插件小用

不知何年何月才能完成OADemo啊,总之还是一步一步来吧,这段时间开始着手了,先做登陆. 前段时间研究了一下在CentOS7下安装Mysql和Memcached服务,并测试了用C#操作,结果还行. 今天做一个简单的基于Bootstarp的响应式登陆页面(其实是在网上下的模板),不管是登陆还是注册吧, ... bbs.chinaacc.com/forum-2-3/topic-5655867.html bbs.chinaacc.com/forum-2-3/topic-5655895.html bbs

angular 使用ui.bootstarp 时间(年月日,小时分钟)

在下才疏学浅,不足之处,还望各位多多指教. 不废话,直接上代码: <!DOCTYPE html> <html lang="en" ng-app="indexApp"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://

玩转Bootstarp(连载)

一.Bootstarp是什么? 简单.灵活的用于搭建WEB页面的HTML.CSS.JS的工具集 (基于HTML5和CSS3) 总结:简洁强大的前端开发框架,可以让WEB开发更迅速.更简单 二.如何使用Bootstarp?(获取getbootstarp.com) Bottstarp分为2和3两个大方向版本 bootstarp2 兼容好,功能略弱 1.下载: 分别对应的是框架 . 源码 .  Sass 2.引入: <!-- Latest compiled and minified CSS -->

AngularJs+BootStarp+fontAwesome打造个人展示页面

原文摘自我的前端博客,欢迎大家来访问 http://hacke2.github.io/ 起因 实验室马上要出去找工作了,大家想写一个展示自己项目的东西,没必要做的太复杂,我就把这几天学到的结合了一下,算是做了 一个大概的样子出来,大家可以自己放里面加内容 点击右上角项目名称可切换不同视图 所含的技术 AngularJs 里面MVC使用AngularJs来实现,主要用了其中两个技术: 1.模板技术 2.路由技术 之所以用了AngularJs的路由技术,是因为做一个页面的跳转,之前做开发都是以sev

bootstarp v3 学习简记

1.快速设置浮动通过这两个class让页面元素左右浮动. !important被用来避免某些问题. <div class="pull-left">...</div><div class="pull-right">...</div> // Classes.pull-left {float: left !important;}.pull-right {float: right !important;} 2.通过添加.lea

[前端框架搭建]requirejs+jquery+bootstarp+Angular的前端组合框架搭建详解(1)-----框架的引入与选择

在园子里晃了两年多,已经从小白变成了小白白. 这个框架的背景是这样的,公司本身有一套自己的框架,但是由其他部门维护,部门想自己弄一套框架,由自己的人来搞. 刚刚调到架构的我,成功的中枪. 废话少说,我们开始 -----------------------------------------------我是华丽的分割线--------------------------------------------------------------------- 各框架的使用与原因,每一个部分都有他必要存

bootstarp 模态框大小尺寸的控制

默认: <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog">