文档章节

bootstrap学习笔记

f
 future1
发布于 2017/04/11 21:57
字数 312
阅读 11
收藏 0

bootstrap的选项卡功能的一个简单demo:

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#a" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#b" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#c" data-toggle="tab">Messages</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="a">a</div>
    <div class="tab-pane fade" id="b">b</div>
    <div class="tab-pane fade" id="c">c</div>
</div>

能用bootstrap的东西,就用bootstrap的东西,不要自己写css和js

要浮动的话,不要用css的float:left;要用bootstrap的一个类pull-left或者pull-right,要清除浮动,不要自己清除浮动,用bootstrap加一个类clearfix

table要加上类table table-striped table-bordered,其中.table可以让这个table的宽度是父元素宽度的100%,table-striped让这个table有条纹,table-bordered可以让这个table有边框

有时候需要一个小小的三角形的符号,用<span class="caret"></span>(这是往下方向的),如果要这个三角形向上,就给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。

使用bootstrap的栅格系统,标准写法如下:
<div class="container-fluid">
    <div class="row">
          <div class="col-md-1">.col-md-1</div>
    </div>
</div>
我经常忘记写<div class="container-fluid">这个嵌套元素

table加上table,table-striped,table-bordered,table-hover

© 著作权归作者所有

共有 人打赏支持
上一篇: vue学习笔记
下一篇: nodejs学习笔记
f
粉丝 0
博文 25
码字总数 58517
作品 0
上饶
私信 提问
啦啦啦哈利路亚/laravel_biji

采用Laravel5.1框架的在线笔记系统 演示地址 http://120.27.102.104/auth/login 项目介绍 基于Laravel+Bootstrap+MariaDB开发系统架构 功能说明 在线笔记系统基于B/S结构的社区性质的协调信息...

啦啦啦哈利路亚
2017/03/08
0
0
Bootstrap响应式前端框架笔记十五——面板与井

Bootstrap响应式前端框架笔记十五——面板与井 Bootstrap中的面板由pannel相关类来创建,一个完整的面板分为面板头部、面板体和面板注脚,并且Bootstrap中默认定义了一些面板风格,示例如下:...

珲少
2016/12/22
22
0
Django 实战1:搭建属于自己社工查询系统(上)

前面的文章已经把模板、模型、视图、表单等知识点逐一讲解,大家已经熟悉它们具体用法。但如何将其串联起来还一筹莫展。本篇文章分享我之前做过的一个小项目,帮助大家抹开这一层迷雾。 1 想...

猴哥Yuri
2018/04/09
0
0
Bootstrap响应式前端框架笔记十七——下拉列表交互

Bootstrap响应式前端框架笔记十七——下拉列表交互 为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定,示例如下: 点击此按钮后,可以自动实现下拉列表的显示...

珲少
2016/12/27
101
0
Bootstrap响应式前端框架笔记十一——分页与标签

Bootstrap响应式前端框架笔记十一——分页与标签 在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下: 效果如下: 为li元素添加d...

珲少
2016/12/13
58
0

没有更多内容

加载失败,请刷新页面

加载更多

指针数组和数组指针的区别

这两个名字不同当然所代表的意思也就不同。我刚开始看到这就吓到了,主要是中文太博大精深了,整这样的简称太专业了,把人都绕晕了。从英文解释或中文全称看就比较容易理解。 指针数组:arr...

天王盖地虎626
13分钟前
0
0
Qt那些事0.0.18

今天要记一下Qt中的Resource。自我感觉理解的不错,但是还会难免有谬误,在日后有可能会更新,也有可能不会。 小声的念叨一句,女人心,海底针。 今天就直接跳过了关于QML在qrc文件中的介绍,...

Ev4n
22分钟前
0
0
深入解析js的作用域、预解析机制

虽然,ES6在我们工作中应用得越来越广泛,但是还是很多项目保留着ES5的写法,所以,今天,带着大家重新巩固下ES5下的作用域及预解析机制。 概念: 作用域:域,指的是一个空间、范围、区域,...

前端攻城老湿
24分钟前
0
0
Spring Cloud Feign - 声明式 REST Client

1、Feign是什么 声明式REST client,来自NetFlix。 允许你编写无实现代码调用REST services 替换RestTemplate(甚至更简单) Spring Cloud 为使用Feign提供了包装器 2、怎样使用Feign 对比:...

Benz001
30分钟前
0
0
前端、后端和全栈到底不该学什么

1、前言 在职业规划咨询过程中经常会被问到这样的问题: 老师,我是该深入钻研专精一门,走技术大牛路线,还是所有都要精通,做一个全栈工程师? 类似问题的变种还有,老师我是不是该30岁最迟...

前端攻城小牛
32分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部