Bootstrap知识点

手机 : xs   ipad：sm  小屏幕： md  大屏幕 ：lg

Bootstrap兼容IE6,7,8版本的HTML5标签引入下面代码:

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

兼容CSS3引入下面代码:

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

一  导航条

        <div class="navbar-header">

               <a href="#" class="navbar-brand">Project Name</a>

         </div>

          <div id="navbar" class="collapse navbar-collapse">

               <ul class="nav navbar-nav">

                        <li class="active"><a>Home</a></li>

                        <li><a href="#">About</a></li>

                        <li><a href="#">Contact</a></li>

               </ul>

          </div>

         面包屑式导航（链接式导航）：breadcrumb

 二  CSS样式

    

       <small></small>  字体变小

       <abbr></abbr>  解释性标签

       <mark></mark> 文字背景色

       <del></del>删除体样式

        text-left/right/center 文字位置

        

        text-lowercase/uppercase/capitalize 文字小写/大写/首字母大写

        <address></address> 地址

        <strong></strong> 加粗 

        white-space: nowrap; 文本进行换行

        text-overflow: ellipsis; 文本溢出时显示省略标记

  三  代码

代码承载

bootstrap提供了三种代码风格

1、使用<code></code>来显示单行内联代码 （单个单词或单个句子）
2、使用<pre></pre>来显示多行块代码  (多行代码)
3、使用<kbd></kbd>来显示用户输入代码  (用户要通过键盘输入的内容)

不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。

 <!--变量-->

 <var>x</var>=<var>y</var>+<var>z</var>

 <!--输出-->

 <samp>hello world!</samp> 

四 表格

表格布局：

        table-striped  表格斑马条纹

        table-bordered  表格边框

        table-hover    鼠标经过表格效果

        table-condensed   表格紧凑

        success/warning/danger/ingo/active 表格状态

       placeholder =“”提示性文字

       <label class="sr-only">选择文件</label>

       has-feedback   小图标

五 按钮

    

      btn btn-default/success/info/danger/link/warning/primary  按钮样式

       btn  btn-lg/sm/xs 按钮大小

六 表单

     禁用：对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。

六 图像

  

     img-responsive 响应式图片

     img-rounded 圆角图片

     img-circle 圆形图片

     img-thumbnail 缩略图片

六 按钮

   

       按钮等分用btn-group-justified

       垂直 vertical

       制作垂直堆叠导航  nav-pills nav-stacked

       自适应导航  nav-justified