zoukankan      html  css  js  c++  java
  • BootStrap 的随笔一二三

    正在学习中待补充 。。为自己日后查看留存,不喜误看

    特别鸣谢,小霖,小涛,小海...

    Bootstrap总结

     

    可实现的页面效果

    导航、格栅分为12份,焦点图,按钮,响应式,下拉按钮,选项卡等

     

    bootstrap布局

      网格系统:

      预定义的网格类

      .row

      .col-xs-4

      .col-sm-4

      .col-md-4

      .col-lg-4

      可用于快速创建网格布局

      其中.col-xs-*用户布局额外小的设备,小于768px

      .col-sm-*用于布局小型设备,768px起

      .col-md-*用于布局中型设备,992px起

      .col-lg-*用于布局大型设备,1200px起

    偏移列

    为了能在大屏幕显示器上使用便宜,使用.col-md-offset-*类,这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。

     

    3.嵌套列

      为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列 内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列总计达 12。

    4.列排序

    Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。

    5排版

    Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。

    如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本

    为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本

    HTML 的默认强调标签 <small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)

    HTML 元素提供了用于缩写的标记,比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 <abbr> title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 <abbr>

    表格

    Bootstrap提供了清晰的创建表格的布局

    <table> 容纳以表格形式显示数据的元素

    <thead> 表格标题行的容器元素<tr>,用来标识表格列

    <tbody> 表格主题中的表格行的容器元素<tr>

    <tr> 一组出现在单行的表格单元格的容器元素

    <td> 默认的表格单元格

    <th> 特殊的表格单元格,位于<thead>内使用

    <caption> 关于表格存储内容的描述

     

    6 先引入一下组件

    <!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

     

    在标签中引入class类例如:

    <table class="table table-striped">  ...</table>

    .active

    .success

    .info

    .warning

    .danger

    设置单元格的颜色

     

     

     

  • 相关阅读:
    ()Python在数学建模中的简单应用
    ()Python3 列表,数组,矩阵的相互转换
    差商代微商的方法求解一阶常微分方程
    ()LaTex 论文排版(1): Win10 下 LaTex所需软件安装 (Tex live 2018 + Tex studio)
    渐进记法(O,Ω,Θ)
    定义类型别名(typedef,using)
    安装Java和Tomcat
    用PHP语言刷OJ题
    函数模板
    数组操作符
  • 原文地址:https://www.cnblogs.com/lh52web/p/3899593.html
Copyright © 2011-2022 走看看