Bootstrap基本入门大全

Bootstrap 是基于 HTML、CSS、JAVASCRIPT的,它简洁灵活,使得 Web 开发更加快捷。 重点的是你要理解这个框架的运行机制,了解了它是怎么运行怎么使用,才能够更加高效的布局页面。 附上中文网站,了解了怎么玩之后就在上面找自己需要的,然后玩起来!! http://www.bootcss.com

选择自己在使用的版本,进入中文手册

按照分类找自己需要的样式,复制粘贴class就可以啦

下面有常用的bootstrap介绍,基本上就够用了,但是有些样式也没有写全,先自己学会怎么使用,再去官网上深入研究吧

1.栅格系统

定义:一系列行和列构建的布局,可以跟着屏幕自动布局

最多可以展示12个列

container:容器。网页上所有的内容都放在这个容器中

两种布局:固定布局-container(自动居中),流式布局-container-fluid(铺满整个屏幕)

<div class="container">

创建行:(一般最多显示12列,如果只想要显示四列,可以将12列均分到四列上)

<div class="col-lg-3">

参数介绍:

col-lg-3:lg(当屏幕大于1200时,大屏幕)

con-md-3:md(在002-1200之间的屏幕)

con-sm-3:sm(768-992之间的屏幕)

con-xs-3:xs(小于758的屏幕)

2.辅助类

文字类:text-

text-primary:默认基础字体颜色

text-success:成功

text-danger:危险

text-info:

text-warning:

text-muted:浅灰色

背景类:bg-

背景颜色可以在bg-后加上上面同样的颜色

按钮:

    <button class="close">&times;</button>

关闭的小叉:

<span class="caret"></span>

下拉菜单的小三角:

快速浮动:

pull-left:左浮动

pull-right:右浮动

清除浮动:clearfix

块元素居中:center-block

文字居中:text-center

显示和隐藏:

3.表格:在table标签中加入table

隔行变色:table-striped

鼠标划上变色:table-hover

表格加边框:table-bordered

表格的背景颜色:在tr中加class="danger/success/warning/info"

表格中垂直居中:vertical-middle

4.列表: ul中加入list-group

li中加入list-group-item

加入徽章

<span class="badge">10</span>  

加颜色在之前的名字后面加,例:list-group-item-success

5.表单

垂直样式:(默认)

表单分组:from-group

表单项(input,textarea):from-control

<form role="form">
  <div class="form-group">
     <label for="username">用户名</label>
     //通过点击文字也可以选中输入框,for中的名字要和input的id一致
     <input type="text" id="username" class="form-control" placeholder="请输入"/>
  </div>
</form>

水平样式: 给form增加form-horizontal

6.按钮 btn

可以给 <a>、<button>或<input>元素添加.btn类。

颜色:btn-颜色

按钮尺寸大小

btn-大小

也可以用btn-block来让按钮沾满一行

激活状态和禁用状态

激活:active

禁用:disabled

按钮式的下拉菜单

将ul列表转换为下拉菜单,添加dropdown-menu类

给button添加dropdown-toggle类

利用data-toggle=dropdown

实现嵌套:

用<div class="btn-group"></div>来包裹多个按钮

输入框:

可以给输入框的两侧分别增加按钮

用add-on和input标签组合

也可以在输入框的后面加

7.导航:添加nav

可以添加nav-justified让导航铺满整个屏幕

基本:nav-tabs

基本pills:nav-pills

堆叠式:nav-stacked

堆叠式pills:nav-pills nav-stacked

8.导航条:navabar

注意:导航条容易遮挡在导航下面写的内容

面包屑导航:breadcrumb

让使用者清楚的知道当年所在页面的位置(不用给ul写样式,添加class之后自动形成以下样式)

xxx|sss|xxx类似的样式

9.分页:(即有页数及上/下一页的东西)

直接添加:pagination:

pager:

10.警告框:

输出提示警告信息,可以进行关闭

alert

也可以进行颜色的设置

alert-danger/warning/info/success

其中关闭的按钮是一个button,添加

<button class="close" data-dismiss="alert"></button>

11.面板:

有标题有内容,一个区域

<div class="panel panel-danger">//可以添加颜色panel-颜色
    <div class="panel-heading">//标题部分
         <h1 class="panel-tittle">这是标题</h1>
    </div>
    <div class="panel-body">//内容部分
         这是内容
    </div>
</div>

12.字体图标:(中文官网上找)

写一个span 加class="图标类名"

也可以写在按钮中

希望对大家有所帮助!!!!欢迎指正,互相学习

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 弹出框 顶

该组件将自己发布为DropdownHandle,因此其子级可以通过注入来控制其可见性:

663
来自专栏Flutter入门到实战

Android适配全面总结(一)----屏幕适配

版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

704
来自专栏河湾欢儿的专栏

(第一版)知识点

742
来自专栏一直在跳坑然后爬坑

环形布局CircleLayout效果图用法链接

1.可以直接在布局文件中进行布局,类似LinearLayout,但是这里不需要关心布局方式,会自动将布局中的所有子view均匀分布到中心点四周,这里你可以设置自...

732
来自专栏韩东吉的Unity杂货铺

零基础入门 13: UGUI Text

前几篇介绍了UGUI里的Image,今天来说下UGUI 的Text,显示文本的组件。因为有了之前代码创建Image的铺垫,所以对Text的使用就都在这篇介绍了。

522
来自专栏LIN_ZONE

Vue(MVVM)、React(MVVM)、Angular(MVC)对比

昨天阿里内推电面一面,面试官了解到项目中用过Vue,就问为什么前端框架使用Vue而不适用其他的框架,当时就懵了。因为只用过Vue,不了解其他两个框架,今天就赶紧...

862
来自专栏岑志军的专栏

ReactNative-综合案例(01)

993
来自专栏谦谦君子修罗刀

react-navigation,刷新你的导航一、属性介绍二、案例

在2017年1月,新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果,可能会成为未来RN导航组件中的主力军。该库包含三类组件: ...

8629
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(二)

还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区...

3188
来自专栏42度空间

【收藏】这么多WEB组件(CSS),攒一个网站够了吧?

总是喜欢简单又精致的东西,美的不繁复也不张扬。这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧?

39714

扫码关注云+社区