bootstrap快速入门

1.前引

 

引入bootstrap官网的源码到本地，导入所需css和js，

另外，想要使用组件等，必须导入jquery的js包

2.布局容器

 

 

如图所示，即为两种布局容器，充满和留白，container类适用于响应式编程。

3.栅格网络

 写css样式时，在div中把col-md-某某，col-sm-某某，col-lg-某某，col-xs-某某都写上，在不同的屏幕分辨时，就可以自动调节div数目，以符合当前设备的分辨。

 同样，支持列排序和列嵌套。

4.标题

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

 使用small标签可以嵌套次标题。

5.警示

    <div class="text-muted">提示，使用浅灰色</div>
    <div class="text-primary">主要，使用蓝色</div>
    <div class="text-success">成功，使用浅绿色</div>
    <div class="text-info">通知，使用浅蓝色</div>
    <div class="text-warning">警示，使用黄色</div>
    <div class="text-danger">危险，使用褐色</div>

bootstrap提供了默认的一些颜色提示，如图所示

 6.对齐

   <p style="text-align: left">可以使用html原生的段落对齐方式</p>


    <!--bootstrap提供的几种对齐方式-->

    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    <p class="text-justify">Justified text.两侧对齐</p>
    <p class="text-nowrap">No wrap text.不换行; 强制在同一行显示;不换行; 强制在同一行显示;
        不换行; 强制在同一行显示;
        不换行; 强制在同一行显示;不换行; 强制在同一行显示;
        不换行; 强制在同一行显示;不换行; 强制在同一行显示;
        不换行; 强制在同一行显示;不换行; 强制在同一行显示;
        不换行; 强制在同一行显示;
    </p>

7.缩略语

 基本缩略语

<abbr title="我爱你亲爱的姑娘，呜噜噜，玛卡巴卡，浦西迪西">缩略语</abbr>

8.列表

 1.无序列表

<ul>
  <li>...</li>
</ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies

2.有序列表

<ol>
  <li>...</li>
</ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at mass

3.内敛列表

<ul class="list-inline">
        <li>...</li>
        <li>.esfsf..</li>
        <li>活动时间喝多了卡..</li>
    </ul>

使<li>里的内容都放在一行里

9.表格

 该部分墙裂建议参考官方文档，写的很良心！！！!

 <table  class="table table-striped table-bordered table-hover" >
        <tr class="info">
            <th>javaweb</th>
            <th>c++     </th>
            <th>javascrip</th>
        </tr>
        <tr class="success">
            <th>的话就爱上</th>
            <th>我的健康圣诞节     </th>
            <th>第三版大家看成</th>
        </tr>
        <tr class="warning">
            <th>第三课京东健康</th>
            <th>111111++     </th>
            <th>12343534</th>
        </tr>
    </table>