bootstrap入门

---

bootstrap 入门

---

1.bootstrap下载 ：官网http://www.bootcss.com/

2.设置boot模版

3.常见的 class

a、按钮：

<!--就是在设置背景色 边框色 字体色-->

<button class="btn btn-danger">我是button</button> 
<button class="btn btn-success">我是button</button>
<button class="btn btn-warning">我是button</button>
<button class="btn btn-default">我是button</button>
<button class="btn btn-info">我是button</button>

<!--激活的状态  其他按钮按下的样式 acitve-->
<button class="btn btn-info btn-block active">我是button</button>
<!--禁用的效果-->
<button class="btn btn-info btn-block active disabled" >禁用</button>

b、图片的操作：

<!--没有样式-->
<img src="a.jpg" alt="">
<!--有样式-->
<img src="a.jpg" class="img-rounded" alt="">  <!--圆角-->
<img src="b.jpg" class="img-responsive" alt="">  <!--响应-->
<img src="a.jpg" class="img-circle" alt="">  <!--圆-->
<img src="a.jpg" class="img-thumbnail" alt="">  <!--缩略图  -->

c、文本的操作：

c1 平分留白操作

平分留白操作 ：由于输出一段长英文文本 最后一个单词写不下，会另起一行，会
造成参差不齐的结果。
解决办法：<p class="text-justify"> <!--默认文本两端对齐  当 文本出现最后单词有留白 将此留白 平分给单词间距--> 

c2不换行

<p class="text-nowrap">

c2字体转换

<!--带下写转换-->
<!--转小写-->
<p class="text-lowercase">
    my NAME IS xiongtao！！！
</p>
<!--转大写-->
<p class="text-uppercase">
    my NAME IS xiongtao！！！
</p>
<!--首字母大写-->
<p class="text-capitalize">
    my NAME IS xiongtao！！！
</p>

c2字体颜色

<!--btn 就是字体颜色-->
<p class="text-warning">今天吃药了吗？？？</p>
<p class="text-success">今天吃药了吗？？？</p>
<p class="text-info">今天吃药了吗？？？</p>
<p class="text-danger">今天吃药了吗？？？</p>
<p class="text-primary">今天吃药了吗？？？</p>

d、列表

<!--去掉点点点的效果-->
<ul class="list-unstyled">
    <li>今天吃饭了</li>
</ul>

e、表格

f、关于浮动

<!--左浮动-->
<ul class="list-unstyled">
<!--右浮动-->
<ul class="list-unstyled">
<!--清除浮动-->
<ul class="clearfix">

g、关于居中效果

<!--案例-->
<style>
     .mcontainer{
         width: 500px;
         height: 500px;
         border: 1px solid #000;
         background-color: #f00;
     }
    p{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        background-color: #0ff;
    }
</style>
<div class="mcontainer">
    <!--设置块 然后在设置margin auto的效果-->
    **<p class="center-block">abc</p>** 
</div>

4.栅格系统

Bootstrap 根据 4 种不同的分辨率提供了不同的预定义样式（栅格类）。栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。

特点：向上兼容 不向下兼容

隐藏效果
  hidden- xs/sm/md/lg
  案例：
   <span class="hidden-xs col-sm-5 col-md-1 bg-info">3</span>

	超小屏幕 手机（<768px）	小屏幕 平板（>=768px）	中等屏幕 桌面（>=992px）	大屏幕 大桌面（>=1200px）
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

5、常用的组件

⑴下拉框

 <div class="dropdown">
     <div  ></div>
     <button data-toggle="dropdown" class="btn dropdown-toggle">火影忍者 <span class="caret"></span></button>
     <ul class="dropdown-menu">
         <li> <a href="#">旋涡鸣人</a></li>
         <li> <a href="#">宇智波佐助</a></li>
         <li> <a href="#">旗木卡卡西</a></li>
         <li> <a href="#">春野樱</a></li>
     </ul>
 </div>

效果图 ：

搜索栏：

<div class="container">  <!--搜索框-->

    <nav class="navbar navbar-default">
        <form class="navbar-form">
            <div class="form-group">
                <input type="text" class="form-control"placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </nav>
</div>

效果图

响应式导航条：

<div class="navbar navbar-inverse">
    <!--768一下用这个盒子 navbar-header-->
    <div class="navbar-header">
        <button class="btn btn-success navbar-toggle" data-toggle="collapse" data-target=".collapse">
            <!--使用navbar-toggle隐藏-->
            <!--压缩条 想要几条 就弄几个span-->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <!--  768以上用这个盒子 navbar-collapse -->
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li data-toggle="tab" class="active"><a href="#">木叶村1</a></li>
            <li data-toggle="tab"><a href="#">木叶村2</a></li>
            <li data-toggle="tab"><a href="#">木叶村3</a></li>
            <li data-toggle="tab" class="dropdown">
                <a href="#" data-toggle="dropdown">木叶村4</a>
                <ul class="dropdown-menu">
                    <li class=""> <a href="#">旋涡鸣人</a></li>
                    <li> <a href="#">宇智波佐助</a></li>
                    <li> <a href="#">旗木卡卡西</a></li>
                    <li> <a href="#">春野樱</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

效果图
①当屏幕为768px以下时

②当屏幕为768px以上时