Bootstrap学习总结

学习并掌握了bootstrap的相关基础知识,能够在项目开发送使用相关知识,并调节页面中的相关内容。

Bootstrap网络结构:

image
...

Bootstrap排版:

(1) 强调文本的几种样式

向左对齐文本

居中对齐文本

向右对齐文本

本行内容是减弱的

本行内容带有一个 primary class

本行内容带有一个 success class

本行内容带有一个 info class

本行内容带有一个 warning class

本行内容带有一个 danger class

(2) 缩写

WWW

(3) 引用

这是一个带有源标题的引用。 Someone famous in Source Title

Bootstrap代码样式:

<header>

Bootstrap表格:

(1) 基本表格

image
基本的表格布局
名称 城市
Tanmay Bangalore

(2) 条纹表格


(3) 带有边框的表格

(4) 悬停的表格

(5) 上下文表格 在标签中引入active、success、warning、danger等样式

Bootstrap表单:

(1) 基本表单
基本表单的样式的垂直的

(2) 内联表单

(3) 水平表单



(4) 文本框


(5) 复选框和单选框
需要换行的就直接使用div块,不换行在label标签中使用class="radio-inline"
(6) 选择框
加上multiple可以在按住control选多个选项



(7) 表单控件状态 可以在input标签末尾输入disabled或者在fieldset标签中插入disabled,禁用输入控件
可以在div块后面加入has-success、has-warning、has-error中改变这个div的状态和颜色
可以在form-control后面加入input-**改变输入控件的大小

Bootstrap按钮:

(1) 按钮样式



btn-primary/btn-info/btn-success/btn-warning/btn-danger/btn-link

image

btn-lg/ btn-sm/ btn-xs/ btn-block

image

active/disabled显示按钮的激活状态和禁用状态

Bootstrap图片:





Bootstrap字体图标:

class="glyphicon glyphicon-user"

Bootstrap下拉菜单:

image


Bootstrap按钮组:

image

Bootstrap输入框组:

@

Bootstrap导航元素:

(1) 标签式导航菜单 class="nav nav-tabs"

image

(2) 胶囊式导航菜单 class="nav nav-pills"

image

(3) 垂直胶囊式导航菜单 class="nav nav-pills nav-stacked"

image

(4) 导航左右对齐 class="nav nav-pills nav-justified"

image

(5) 单独禁用某个菜单上的连接 class="disabled"

image

(6) 导航中的下拉菜单



Bootstrap导航栏

(1) 默认样式的导航栏



(2) 响应式导航栏目
a.先建立一个按钮用于显示下拉导航



b.再实现具体下拉的导航



(3) 导航栏中的表单


(4) 在导航栏中添加按钮
要注意的是按钮后面需要添加navbar-btn

(5) 导航栏中添加文本
使用class="navbar-text",可以在导航栏中添加文本信息
(6) 导航栏中条件文字图标



(7) 组件对齐
在元素模块class末尾添加navbar-left 或 navbar-right可以实现左对齐或者右对齐
(8) 将导航栏固定在顶部

(9) 将导航栏固定在底部

(10) 导航栏静态固定在顶部

(11) 黑底白字的导航栏

Bootstrap面包屑导航:

面包屑导航可以在导航中显示当前页的层次结构信息



Bootstrap分页:

(1) 默认分页(无序列表) class="pagination"

image

(2) 分页的状态
禁用:class="disabled"
默认选中:class="active"
(3) 调整大小
pagination-lg、 pagination-sm …
(4) 默认的翻页



image

(5) 左右对齐

  • 中插入 class="previous"左对齐 class="next"右对齐
    (6) 翻页的状态
    在添加class中添加一个disabled禁用这个标签

    Bootstrap标签:

    (1) 标签样式
    default、primary、success、info、warning、danger
    标签的大小可以根据标签内的文字大小进行适应

    Bootstrap徽章:

    (1) 默认样式
    class="badge"
    (2) 导航中插入徽章

    image

    Bootstrap超大屏幕:

    class="container"

    Bootstrap页面标题:

    class="page-header"

    Bootstrap缩略图:

    默认的缩略图class="thumbnail",会添加四个像素的内边距,和一个灰色的边框,当鼠标放在图像上时,会动画显示出图像的轮廓。

    Bootstrap警告:

    (1) 默认警告样式

    成功!很好地完成了提交。
    信息!请注意这个信息。
    警告!请不要提交。
    错误!请进行一些更改。

    (2) 可取消的警告
    需要在div中添加alert-dismissable,且button元素包括data-dismiss="alert"

    信息!请注意这个信息。

    (3) 给警告增加链接

    成功!很好地完成了提交。
    
    

    Bootstrap进度条:

    (1) 默认进度条
    其中width中的百分比表示整体的进度

    (2) 进度条样式
    class="progress-bar progress-bar-success"
    class="progress-bar progress-bar-info"
    class="progress-bar progress-bar-warning"
    class="progress-bar progress-bar-danger"
    (3) 条纹进度条
    class="progress progress-striped"
    (4) 带动画的条纹进度条
    class="progress progress-striped active"
    (5) 进度条堆叠
    把多个进度条放进一个progress的div中,后面的进度条会紧紧跟着前面的进度,需要注意总体进度是否超过100%

    Bootstrap多媒体对象:

    媒体对象

    媒体标题

    这是一些示例文本。

    Bootstrap列表组:

    (1) 普通列表组

    • 免费域名注册

    (2) 带链接的列表组

    24*7 支持
    
    

    (3) 自定义列表组内容

    
    

    入门网站包

    您将通过网页进行免费域名注册。

    Bootstrap面板:

    Panel还可以设置各种语境色彩panel-primary、panel-success、panel-info、panel-warning、panel-danger。也可以往里面添加表格、列表等。

    带有 title 的面板标题

    面板内容

    Bootstrap Well:

    well是一种会使得内容凹陷显示的的class

    你可能感兴趣的:(Bootstrap学习总结)