html + Bootstrap

原创 2015年07月09日 10:42:44

转载请标明http://blog.csdn.net/kylinhao/article/details/46813737
一直想随便写写,但是太懒,想到哪就写到哪吧
详情参考
1. w3c bootstrap教程 http://www.runoob.com/bootstrap/bootstrap-tutorial.html
2. 官网教程 http://v3.bootcss.com/components/
首先Boostrap设置了很多的格式可以让元素的style看起来更漂亮,但是Boostrap的很多样式并没有做成一个合适的文档,所以有时候找的比较麻烦。
下面找一些常用的元素使用bootstrap
1. input text

<label>新密码:</label>
<input type="password" name="pwd" class="form-control">

这样写了后会发现它们不再一行
这是因为form-control 对input的控制是width:100%;display: block;
让他们在一行显示只需要设置下width和display即可,举个例子

.form-control {
    width: 300px;
    display: inline-block;
    margin: 5px 5px 5px 20px;
}

2.table
基本使用

<table class="table table-bordered table-hover" >
</table>

3.panel
这个看起来还可以

<div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">title</h3>
            </div>
            <div class="panel-body">
            body
            </div>
        </div>

4.fieldset

 <fieldset>
        <legend>title</legend>
        <div>
            body
        </div>
</fieldset>
版权声明:本文为博主原创文章,未经博主允许不得转载。

html日记——使用强大的BootStrap(1)

BootStrap对开发者来说最大的好处就是响应式布局和一些优秀的样式 现在我给大家介绍一些使用BootStrap的步骤和一些常用的东西1.编写头部 ...
  • qq_32198277
  • qq_32198277
  • 2016年08月01日 20:14
  • 1309

在HTML网页中引入Bootstrap前端框架

Bootstrap百度百科介绍:       Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,...
  • qq_21429153
  • qq_21429153
  • 2017年02月15日 17:24
  • 7357

网页上中下三分布局,上下固定,中间自适应

* { margin:0; padding:0; } html, body, #box { height:100%; font:small/1.5 "宋体", serif; }...
  • haifengzhilian
  • haifengzhilian
  • 2014年04月29日 10:09
  • 6934

Bootstrap 编码规范

Bootstrap 编码规范
  • Silent_Paladin
  • Silent_Paladin
  • 2017年01月14日 13:40
  • 292

HTML抽屉效果的实现与展示

本文主要讲了HTML抽屉效果的实现与展示,最后还用bootstrap做了一个简单的实例。...
  • Evankaka
  • Evankaka
  • 2015年10月29日 15:43
  • 9785

html 中的空格和空行

html 中的空格和空行要用特殊的
  • PurpleGalaxy
  • PurpleGalaxy
  • 2014年07月21日 16:06
  • 1240

Bootstrap简单认识之Tooltips组件

Tooltips(提示工具)组件一、简介 此组件用到了Tether插件,Tether一般用于搞定两个元素的位置关系,如下代码:new Tether({ // 此为主动附着元素 element:...
  • u012062760
  • u012062760
  • 2017年03月10日 17:11
  • 2037

HTML5+Bootstrap后台系统框架集(持续更新中……)

HTML5+Bootstrap后台系统框架集(持续更新中……)
  • yangyisen0713
  • yangyisen0713
  • 2017年01月08日 15:58
  • 7395

【AmazeUI】卡片式布局

本文与《【Ratchet】卡片式布局》(点击打开链接)为姊妹篇,在AmazeUI的官网上没有这种布局,但是,我们可以利用其面板组的方式去实现。 先贴上本网页所处的目录结构,同样地,在windows下...
  • yongh701
  • yongh701
  • 2015年05月04日 20:08
  • 2132

Node.js开发入门—引入UIBootstrap

UI Bootstrap,用AngularJS实现的原生指令实现了与Bootstrap类似的前端UI组件,来看看怎么用……...
  • foruok
  • foruok
  • 2015年09月02日 07:13
  • 7141
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html + Bootstrap
举报原因:
原因补充:

(最多只允许输入30个字)