bootstrap魔太框大小_bootstrap如何让输入框中文字适应文本框大小 - CSDN
  • (1)修改修改modal中的modal-dialog这个div宽度

    (1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现

    <div class="modal-dialog" style="width:600px"> 

    (2) 修改高度和宽度最好的办法是修改modal-body中添加的控件,设置控件的大小,modal会自动适应。

    例如

    <div class="modal fade in" id="_modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
         style="display: block;">
      <div class="modal-dialog" role="document" style="width: 680px;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="modalLabel">选择移动到的目录</h4></div>
          <div id="_modalDialog_body" class="modal-body">
                <!--  设置这个div的大小,超出部分显示滚动条 -->
            <div id="selectTree" class="ztree" style="height:300px;overflow:auto; "> 
            </div>
    
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

    显示效果图


    展开全文
  • 以下的是代码 ``` ...head> title>下拉列表title> meta charset="UTF-8"> meta name="viewport" content="width=device-width,initial-scale=1"> script type="text/javascript" src="js/jquery

    这里写图片描述
    以下的是代码

    ```
    <html>
    <head>
        <title>下拉列表</title>
        <meta charset="UTF-8">
        <!-- 此时表示根据设备的大小调整页面的显示宽度 -->
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <!-- Bootstrap需要jQuery的支持,所以一定要导入jQuery开发包 -->
        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <!-- Bootstrap所需要的一些组件的*.js文件 -->
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <!-- Bootstrap所需要的一些基础样式 -->
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
        <!--自己写的样式-->
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
    <div class="navbar " id="site-navbar"  >
    <div class="container">
    <!--logo-->
                <div class="navbar-header"><!--navbar-header是bootstrap里的标签-->
                    <a class="navbar-brand"><!--navbar-brand是自己写的的标签-->
                    </a>
                </div>
    <!-搜索框+搜索按钮->
                <form class="navbar-form navbar-left hidden-sm hidden-xs clearfix" role="search" action="/search">
                    <div class="form-group">
                        <input type="search" class="form-control" placeholder="请输入感兴趣的课程名" name="q">
                    </div>
                    <button type="submit" class="btn"><span class="glyphicon glyphicon-search"></span></button>
                </form>
        <!--登录和注册按钮-->
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/login?goto=/"> <span class="glyphicon glyphicon-user"></span>登录</a></li>
                    <li><a href="/register?goto=/"> <span class="glyphicon glyphicon-plus"></span>注册</a></li>
                </ul>
            </div>
    </div>
    </div>
    
    <!-- 在此处进行所有代码的编写 -->
    <!--导航栏的编写-->
    <div class="navbar  navbar-default" style="background: Orange">
        <div class="container ">
            <div class="hidden-xs">
                <ul  class="nav navbar-nav " >
                    <li ><a href="index.html" class="active">首页</a></li>
                    <li><a href="#">李兴华3月5日面授班</a></b></li>
    <!-- caret样式的作用是显示一个小的下拉标志-->
                    <li class="dropdown"><!--下拉列表标配一-->
                            <a class=" dropdown-toggle" data-toggle="dropdown">
                                极限IT网校培训<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu"><!--下拉列表标配一-->
    
                                <li><a href="#">极限IT-【0计划】免费参加JAVA+ORACLE+HTML</a>
                                </li>
                                <li><a href="#">
                                    极限IT-JAVA工程师训练营 主流技术就业课程
                                </a></li>
                                <li><a href="#">
                                    极限IT 互联网架构师 进阶提升薪水翻倍
                                </a></li>
                                <li><a href="#">
                                    JAVAEE框架实战班SSM 2017版
                                </a></li>
                                <li><a href="#">
                                    JAVA框架SSH班
                                </a></li>
                            </ul>
                    </li>
    
                    <li class=" dropdown ">
                        <a href="/course/explore" class=" dropdown-toggle "   data-toggle="dropdown" >在线视频课程  <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"  >互联网架构</a></li>
                            <li><a href="#"  >大数据</a></li>
                            <li><a href="#"  >编程语言</a></li>
                            <li><a href="#"  >开源框架</a></li>
                            <li><a href="/course/explore/project"  >项目案例</a></li>
                            <li><a href="/course/explore/database"  >数据库</a></li>
                            <li><a href="/course/explore/webui"  >前端开发</a></li>
                            <li><a href="/course/explore/transmission"  >数据传输</a></li>
                            <li><a href="/course/explore/os"  >操作系统</a></li>
                            <li><a href="http://www.mldn.cn/course/explore/mobile"  >Android开发</a></li>
                            <li><a href="http://www.mldn.cn/course/explore/os"  >Linux系统开发</a></li>
                            <li><a href="http://www.mldn.cn/course/explore/tools"  >开发工具</a></li>
                            <li><a href="http://www.mldn.cn/course/explore/ver"  >版本控制</a></li>
                            <li><a href="http://www.mldn.cn/course/explore/Enterprise"  >EE商业体系</a></li>
                        </ul>
                    </li>
                    <li><a href="#" >Java学习顺序</a></li>
                    <li><a href="#" >书籍</a></li>
                    <li><a href="#" >APP客户端</a></li>
                </ul>
            </div>
    
        </div>
    </div>
    <div class="footer">
        Powered by EduSoho v8.2.11 ©2014-2018
    </div>
    </body>
    </html>
    展开全文
  • Bootstrap

    2019-11-21 18:05:16
    Bootstrap 一、一个Bootstrap的标准模板 Bootstrap的文件主要包含css文件、js文件和字体文件。Bootstrap框架的核心是轻量的CSS基础代码库,通过<link>标签引入 <!DOCTYPE html> <...

    Bootstrap

    一、一个Bootstrap的标准模板

    Bootstrap的文件主要包含css文件、js文件和字体文件。Bootstrap框架的核心是轻量的CSS基础代码库,通过<link>标签引入

    <!DOCTYPE html>
    <html lang="en">
        <head>
        	<!--meta标签必须放在最前面-->
            <meta charset="utf-8">
            <!--用于对移动设备的适配,设置视口的宽为机器的宽,缩放为1-->
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Bootstrap的HTML标准模板</title>   
            <!-- Bootstrap -->
            <link href="css/bootstrap.min.css" rel="stylesheet">
            <!--你自己的样式文件 -->
            <link href="css/your-style.css" rel="stylesheet">        
        </head>
        <body>
            <h1>Hello, world!</h1>
            
            <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
            <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
            <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
        </body>
    </html>
    

    二、排版

    需要调用bootstrap.css

    1. 标题

    • Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1><h6>,只不过Bootstrap覆盖了其默认的样式,通过指定class属性为"h1"到"h6",让非标题元素和标题使用相同的样式
    <h1>我的第一个bootstrap程序</h1>
    <div class="h1">我的第一个bootstrap程序</div>
    
    • 在标题后设置副标题
    <h1>Bootstrap标题一<small>我是副标题</small></h1>
    

    2. 突出样式

    可以通过添加class=“lead”实现段落p突出显示。除此之外,Bootstrap还通过元素标签:<small><strong><em><cite>给文本做突出样式处理。

    • 粗体
      <b></b>或者<strong></strong>
    • 斜体
      <i></i>或者<em></em>
    • 强调
      这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:
      • .text-muted:提示,使用浅灰色(#999)
      • .text-primary:主要,使用蓝色(#428bca)
      • .text-success:成功,使用浅绿色(#3c763d)
      • .text-info:通知信息,使用浅蓝色(#31708f)
      • .text-warning:警告,使用黄色(#8a6d3b)
      • .text-danger:危险,使用褐色(#a94442)

    3. 文本对齐

    • .text-left:左对齐
    • .text-center:居中对齐
    • .text-right:右对齐
    • .text-justify:两端对齐

    4. 列表

    • 普通列表
      列表的使用与HTML相同,只是样式上Bootstrap稍做修改
      通过给无序列表添加一个类名.list-unstyled,这样就可以去除默认的列表样式的风格。例如有序列表前的数字,无序列表前的点。
    • 内联列表
      通过添加类名.list-inline来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。
    • 定义列表
      定义列表使用,与HTML使用定义列表的方法是相同,Bootstrap可以给<dl>添加类名.dl-horizontal,实现水平定义列表(屏幕大于768px)
      <dl class="dl-horizontal">
          <dt>北京</dt>
          <dd>帝都</dd>
          <dt>上海</dt>
          <dd>魔都</dd>
      </dl>
      

    5. 代码

    1. 使用<code></code>来显示单行内联代码,显示即为样式
    2. 使用
      <pre></pre>
      来显示多行块代码
    3. 使用<kbd></kbd>来显示用户输入代码
    • pre标签上添加类名.pre-scrollable,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

    6. 表格

    Bootstrap的表格格式与HTML一样,后面介绍表格类型的时候,结构都是类似下面的代码

    <table>
    	<thead>
    		<tr>
    			<th>表格标题</th></tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>表格单元格</td></tr></tbody>
    </table>
    
    • Bootstrap为表格不同的样式风格提供了不同的类名,主要包括
      • .table:基础表格(<table class="table">
      • .table-striped:斑马线表格(<table class="table table-striped">
      • .table-bordered:带边框的表格(<table class="table table-bordered">
      • .table-hover:鼠标悬停高亮的表格,可以和Bootstrap其他表格混合使用。简单点说,只要你想让你的表格具备悬浮高亮效果,你只要给这个表格添加table-hover类名就好了
        • <table class="table table-striped table-bordered table-hover">
      • .table-condensed:紧凑型表格(<table class="table table-condensed">
      • .table-responsive:响应式表格,当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。
        • <div class="table-responsive"><table class="table table-bordered"></table></div>
    • Bootstrap表格的行元素<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色
      类名 描述 颜色
      .active 表示当前活动的信息 #f5f5f5
      .success 表示成功或者正确的行为 #dff0d8
      .info 表示中立的信息或行为 #d9edf7
      .warning 表示警告,需要特别注意 #fcf8e3
      .danger 表示危险或者可能是错误的行为 #f2dede

    特别提示:除了.active之外,其他四个类名和.table-hover配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在.table-hover表格中也要做相应的调整。

    三、表单

    需要调用bootstrap.css

    1. 水平表单(标签居左,表单控件居右)

    在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:

    • 1、在元素是使用类名form-horizontal
      • 在元素上使用类名form-horizontal主要有以下几个作用:
        • 设置表单控件padding和margin值。
        • 改变“form-group”的表现形式,类似于网格系统的“row”
    • 2、配合Bootstrap框架的网格系统。(网格布局会在以后的章节中详细讲解)

    2. 内联表单(表单的控件都在一行内显示)

    • <form>元素中添加类名“form-inline
    • 要在input前面添加一个label标签时,可以将label标签放在容器“form-group”中
    • label隐藏:在label标签运用了一个类名“sr-only”,这个样式将标签隐藏了
    <form class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail2">邮箱</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword2">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> 记住密码
        </label>
      </div>
      <button type="submit" class="btn btn-default">进入邮箱</button>
    </form>  
    

    3. 输入框input

    在Bootstrap中使用input时也必须添加type类型,同时需要添加类名“form-control

    4. 下拉选择框select

    拉选择框直接添加类名form-control,多行选择设置multiple属性的值为multiple

    <select multiple class="form-control"> 
    

    5. 文本域textarea

    文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto

    6. 复选框checkbox和单选择按钮radio

    Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio与label标签配合使用会出现一些小问题(最头痛的是对齐问题)

    • 1、先将checkbox和radio都使用label包起来了
    • 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
    • 3、radio连同label标签放置在一个名为“.radio”的容器内
    <form>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="">
                记住密码
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optionsRadios" value="love" checked>
                喜欢
            </label>
        </div>
    </form>
    

    (2) 水平排列

    • 1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline
    • 2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline

    (3) 改变宽高

    高度:需要在已添加类form-control的基础上再添加:

    • 1、input-sm:让控件比正常高度更低
    • 2、input-lg:让控件比正常高度更高
      宽度要用到Bootstrap的网格系统:
    <form role="form" class="form-horizontal">
        <div class="form-group"><!--相当于网格系统中的row-->
            <div class="col-xs-4"><!--设置宽度-->
                <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
            </div>
            <div class="col-xs-6">
                <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
            </div>
        </div>
    </form>
    

    7. 焦点样式

    给控件添加类名“form-control”就会自动获得Bootstrap定义的默认焦点样式

    8. 禁用样式

    • 在需要禁用的表单控件上加上“disabled
    • 在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的

    9. 验证状态

    form-group容器上对应添加状态类名

    • 1、.has-warning:警告状态(黄色)
    • 2、.has-error:错误状态(红色)
    • 3、.has-success:成功状态(绿色)
      如果你想让表单在对应的状态下显示 icon (对号(√)、叉号(×)) 出来,步骤:
    • 1、要在对应的状态下添加类名“has-feedback”(同1、2、3一起用)
    • 2、在input标签后加入span标签
      表单中加入提示信息用help-block
    <form role="form">
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" ><!--input文本框-->
        <span class="help-block">你输入的信息是正确的</span><!--提示信息-->
        <span class="glyphicon glyphicon-ok form-control-feedback"></span><!--icon图标-->
      </div>
      <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
        <span class="help-block">请输入正确信息</span>
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
      <div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
        <span class="help-block">你输入的信息是错误的</span>
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
      </div>
    </form>  
    

    10. 按钮

    需要调用bootstrap.css

    (1) 按钮风格

    <button class="btn" type="button">基础按钮.btn</button><!--基础类btn,搭配下面的类进行使用,也可以在input/a标签上加入btn样式-->
    <button class="btn btn-default" type="button">默认按钮.btn-default</button><!--鼠标移入会有变色--><!--深灰色-->
    <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <!--深蓝色-->
    <button class="btn btn-success" type="button">成功按钮.btn-success</button> <!--绿色-->
    <button class="btn btn-info" type="button">信息按钮.btn-info</button> <!--浅蓝色-->
    <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <!--橙色-->
    <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <!--红色-->
    <button class="btn btn-link" type="button">链接按钮.btn-link</button> <!---->
    

    (2) 按钮大小

    <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
    <button class="btn btn-primary" type="button">正常按钮</button>
    <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
    <button class="btn btn-primary btn-xm " type="button">块状超小型按钮.btn-xm</button><!--块状按钮-->
    

    (3) 按钮填充

    按钮使用"btn-block"这个类名可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮(见上例中的超小型按钮)

    11. 图片

    <img>标签上添加对应的类名:

    • 1、img-responsive:响应式图片,主要针对于响应式设计
    • 2、img-rounded:圆角图片
    • 3、img-circle:圆形图片
    • 4、img-thumbnail:缩略图片

    12. 图标(icon)

    通过scan标签来获取预定义好的小图标。在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现,然后通过伪元素“:before”的“content”属性调取对应的icon编码
    用法:

    <span class="glyphicon glyphicon-search"></span>
    <span class="glyphicon glyphicon-asterisk"></span>
    

    Bootstrap中文网:官网里有全部的组件,直接将要用的图标对应的类复制到<span>标签的class属性中就可以引用
    还可以使用第三方为Bootstrap框架设计的图标字体,如Font Awesome(http://www.bootcss.com/p/font-awesome/)

    四、网格系统

    网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

    1. 容器,行,列

    1. 数据行(row)必须包含在容器(container)中,以便为其赋予合适的对齐方式和内距(padding)。如:
    <div class="container">
    	<div class="row"></div>
    </div>
    
    1. 在行(row)中可以添加列(column(也就是下面的col-md-x的类,x代表占几个列网格)),但列数之和不能超过平分的总列数,比如12。超过了总列数,最后的整体会换行。如:
      • 1、col是column简写:列;
      • 2、xs是maxsmall简写:超小, sm是small简写:小, md是medium简写:中等, lg是large简写:大;
      • 3、-* 表示占列数,即占每行row分12列栅格系统比;
        • .col-xs-* 超小屏幕如手机 (<768px)时使用;
        • .col-sm-* 小屏幕如平板 (768px ≤ 宽度 <992px)时使用;
        • .col-md-* 中等屏幕如普通显示器 (992px ≤ 宽度 < 1200px)时使用;
        • .col-lg-* 大屏幕如大显示器 (≥1200px)时使用。
    <div class="container"><!--最外面的容器-->
    	<div class="row"><!--容器内的一行-->
    		<div class="col-md-4"></div><!--一行中有12个小格,这里占4个小格-->
    		<div class="col-md-8"></div><!--一行中有12个小格,这里占8个小格-->
    	</div>
    </div>
    
    1. 具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(row)的直接子元素

    2. 列偏移

    1. col-md-offset-x”:对列进行向右偏移x位
    <div class="container">
      <div class="row">
        <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
      </div>
    </div>
    
    1. col-md-push-x”:将元素往右移x位
    2. col-md-pull-x”:将元素住左移x位

    3. 网格嵌套

    <div class="container">
        <div class="row">
            <div class="col-md-8"><!--将这8份再分成12份-->
                <div class="row">
                    <div class="col-md-6" style="background-color: #00B83F">col-md-6</div>
                    <div class="col-md-6" style="background-color: red">col-md-6</div>
                </div>
            </div>
            <div class="col-md-4" style="background-color: yellow">col-md-4</div>
        </div>
    </div>
    

    五、下拉菜单

    需要调用bootstrap.cssbootstrap.js

    1. 基本用法

    1. 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:<div class="dropdown"></div>

    2. 使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:data-toggle="dropdown"

    3. 下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为:<ul class="dropdown-menu">

    <div class="dropdown">
    	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
       选择你喜欢的水果
    		<span class="caret"></span>
    	</button>
    	<ul class="dropdown-menu">
    		<li><a href="#"></a></li>
    		<li><a href="#">苹果</a></li>
    	</ul>
    </div> 
    

    2. 下拉菜单分组

    1. 假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。
    2. 为了让这个分组更明显,还可以给每个组添加一个头部(标题),通过给
    3. 标签添加类名dropdown-header来添加标题
    4. 下拉菜单默认是左对齐(“dropdown-menu-left”),如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名

    3. 下拉菜单状态

    1. 下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus
    2. 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            下拉菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right"><!--设置右对齐-->
            <li class="dropdown-header">第一部分菜单头部</li><!--设置组标题-->
            <li class="disabled"><a href="#">第一部分下拉菜单项</a></li><!--设置禁用状态-->
            <li class="divider"></li><!--设置分隔线-->
            <li class="dropdown-header">第二部分菜单头部</li>
            <li class="active"><a href="#">第二部分下拉菜单项</a></li><!--设置活动状态-->
        </ul>
    </div>
    

    4. 下拉菜单向上弹出

    默认为向下弹出,设置为向上弹出时,需要在容器的dropdown类名上追加“dropup”类名
    按钮上弹出对应的icon(小三角):<span class="caret"></span>

    六、按钮组

    需要调用bootstrap.cssbootstrap.js

    1. 按钮组

    • 使用一个名为“btn-group”的容器,把多个按钮放到这个容器中,容器里的标签元素需要带有类名“btn
    • 将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中,实现一个按钮工具栏

    2. 按钮组大小

    • 在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组
      • btn-group-lg:大按钮组
      • btn-group-sm:小按钮组
      • btn-group-xs:超小按钮组
    <div class="btn-toolbar"><!--按钮工具栏,里面有多个按钮组-->
        <div class="btn-group btn-group-lg"><!--大按钮组-->
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        </div>
        <div class="btn-group"><!--普通按钮组-->
            <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
        </div>
    </div>
    

    3. 按钮组中加下拉菜单及按钮组分布

    • 把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。为水平按钮组加下拉菜单
    • 把水平分组的“btn-group”类名换成“btn-group-vertical”,变为垂直按钮组。
    • 等分按钮也常被称为是自适应分组按钮,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名
    • 下拉菜单向上弹出时,只需要在“btn-group”上添加“dropup”类名
    <div class="btn-group"><!--水平按钮组,btn-group改为btn-group-vertical变为垂直按钮组-->
        <button class="btn btn-default" type="button">首页</button>
        <div class="btn-group"><!--把dropdown换成btn-group,并与普通按钮放在同一级-->
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们
            	<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="##">公司简介</a></li>
            </ul>
        </div>
    </div>
    

    七、导航

    Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类

    • 标签形导航(“nav-tabs”)
    • 胶囊形(pills)导航(“nav-pills”)
      <ul class="nav nav-tabs"><!--标签形导航-->
      	<li class="active"><a href="##">Home</a></li><!--选中样式-->
      	<li><a href="##">CSS3</a></li><!--正常样式-->
      	<li class="disabled"><a href="##">Responsive</a></li><!--禁用样式-->
      </ul>
      
    • 垂直堆叠的导航:“nav-pills”的基础上添加一个“nav-stacked”类名
      <ul class="nav nav-pills nav-stacked"><!--垂直堆叠的导航-->
          <li class="active"><a href="##">Home</a></li>
       	<li><a href="##">CSS3</a></li><!--正常样式-->
          <li class="nav-divider"></li><!--分隔线-->
       	<li class="disabled"><a href="##">Responsive</a></li><!--禁用样式-->
      </ul>
      
    • 自适应导航:“nav-justified”。需要和“nav-tabs”或者“nav-pills”配合在一起使用。自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。
    • 导航加下拉菜单(二级导航):只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul
      <ul class="nav nav-pills">
      	<li class="active"><a href="##">首页</a></li>
      		<li class="dropdown">
      			<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
      			<ul class="dropdown-menu">
      				<li><a href="##">CSS3</a></li>
      				<li class=”nav-divider”></li><!--分隔线-->
      			</ul>
      		</li>
      	<li><a href="##">关于我们</a></li>
      </ul>
      
    • 面包屑式导航:作用是告诉用户现在所处页面的位置(当前位置)。使用方式:为ol加入breadcrumb
      <ol class="breadcrumb">
      	<li><a href="#">首页</a></li>
      	<li class="active">《图解CSS3》</li>
      </ol> 
      

    八、导航条

    1. 基础导航条

    • 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav
    • 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default/navbar-inverse
    • navbar-deafult类名换成navbar-inverse。黑色的导航条风格
    <div class="navbar navbar-default">
    	<ul class="nav navbar-nav">
    		<li class="active"><a href="##">网站首页</a></li>
    		<li><a href="##">系列教程</a></li>
    	</ul>
    </div>
    

    2. 导航条标题、二级导航条

    通过“navbar-header”和“navbar-brand”来实现

    <div class="navbar navbar-default">
       <div class="navbar-header"><!--导航条标题-->
           <a href="##" class="navbar-brand">慕课网</a>
       </div>
    	<ul class="nav navbar-nav">
    	 	<li class="active"><a href="##">网站首页</a></li><!--当前状态样式-->
            <li class="dropdown"><!--二级导航条-->
            	<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
            	<ul class="dropdown-menu">
            		<li><a href="##">JavaScript</a></li>
            		<li class="disabled"><a href="##">PHP</a></li><!--禁用样式-->
           		</ul>
           	</li>
    	</ul>
    	<li><a href="##" class="navbar-text">Navbar Text</a></li><!--导航条中加入文本-->
    	<form action="##" class="navbar-form navbar-right" rol="search"><!--加入表单,左对齐-->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入关键词"/>
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </div>
    

    3. 导航条中加入表单

    • 通过“navbar-form”,在navbar容器中放置一个带有navbar-form类名的表单
    • navbar-left”让表单左浮动,“navbar-right”元素在导航条靠右对齐

    4. 导航条中的按钮、文本和链接

    需要和navbar-brandnavbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。

    • 1、导航条中的按钮navbar-btn
    • 2、导航条中的文本navbar-text
    • 3、导航条中的普通链接navbar-link

    5. 固定导航条

    在制作导航条最外部容器navbar上追加对应的类名

    • .navbar-fixed-top:导航条固定在浏览器窗口顶部
    • .navbar-fixed-bottom:导航条固定在浏览器窗口底部
      为了避免固定导航条遮盖内容,我们需要在body上做一些处理:
    body {
    	padding-top: 70px;/*有顶部固定导航条时设置*/
    	padding-bottom: 70px;/*有底部固定导航条时设置*/
    }
    

    6. 响应式导航条

    可以适应屏幕,使用步骤:

    • 1、保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapsenavbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
    • 2、保证在窄屏时要显示的图标样式(固定写法):
      <button class="navbar-toggle" type="button" data-toggle="collapse">
      	<span class="sr-only">Toggle Navigation</span>
      	<span class="icon-bar"></span>
      	<span class="icon-bar"></span>
      	<span class="icon-bar"></span>
      </button>
      
    • 3、并为button添加data-target=".类名/#id名",类名还是id名由需要折叠的div来决定。
    <div class="navbar navbar-default">
        <div class="navbar-header">
             <!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
            <a href="##" class="navbar-brand">CSDN</a>
        </div>
        <!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="##">网站首页</a></li>
                <li><a href="##">系列教程</a></li>
            </ul>
        </div>
    </div>
    

    7. 分页导航

    (1)带页码的分页导航

    • 使用ul>li>a这样的结构,在ul标签上加入pagination方法
    • ul上通过“pagination-lg”让分页导航变大;
    • ul上通过“pagination-sm”让分页导航变小
    <ul class="pagination pagination-lg">
    	<li><a href="#">&laquo;第一页</a></li>
    	<li><a href="#">12</a></li>
    	<li class="active"><a href="#">13</a></li>
    	<li class="disabled"><a href="#">最后一页&raquo;</a></li>
    </ul> 
    

    (2)翻页分页导航

    • 将带页码的分页导航中pagination变为pager
    • previous:让“上一步”按钮居左。next:让“下一步”按钮居右
    <ul class="pager">
    	<li class="disabled previous"><span>&laquo;上一页</span></li><!--禁用样式,居左,默认居中-->
    	<li class="next"><a href="#">下一页&raquo;</a></li><!--居右-->
    </ul>
    

    8. 标签(如新加的标签,上面显示一个new)

    通过这样的方式定义标签:

    <h3>标签是在导航上多加的说明 <span class="label label-default">New</span></h3>
    

    标签的风格:

    <span class="label label-default">默认标签</span><!--深灰色-->
    <span class="label label-primary">主要标签</span><!--深蓝色-->
    <span class="label label-success">成功标签</span><!--绿色-->
    <span class="label label-info">信息标签</span><!--浅蓝色-->
    <span class="label label-warning">警告标签</span><!--橙色-->
    <span class="label label-danger">错误标签</span><!--红色-->
    

    9. 徽章(如有一条消息,在导航上的通知)

    徽章效果,使用“badge”样式来实现。
    使用方法:

    <li><a href="#">Inbox<span class="badge">42</span></a></li>
    

    九、缩略图

    • 通过“thumbnail”样式配合bootstrap的网格系统来实现
    • 在仅有缩略图的基础上,添加了一个divclass为“caption“的容器,在这个容器中放置其他内容,比如说标题,文本描述,按钮等
    <div class="container">
        <div class="row">
    		<div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail"><!--设置thumbnail样式-->
    				<img>
    			</a>
    			<div class="caption">
    				<h3>Bootstrap框架系列教程</h3><!--文本-->
    				<p><a href="##" class="btn btn-primary">开始学习</a><!--按钮--></p>
    			</div> 
    		</div>
    		<div class="col-xs-6 col-md-3">
    			<a href="#" class="thumbnail">
    				<img>
    			</a>
    		</div>
    	</div>
    </div>
    

    十、警示框

    1. 普通警示框

    Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下,提供了四种不同的警示框效果:

    • 1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,绿色;
    • 2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,浅蓝色;
    • 3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,浅黄色;
    • 4、错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,浅红色

    使用方法:
    在类名为“alert”的div容器里放置提示信息,在“alert”基础上追加对应的类名,实现不同类型警示框

    <div class="alert alert-success" role="alert">恭喜您操作成功!</div>
    

    2. 加入关闭按钮

    • 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
    • 2、在button标签中加入class="close"类,实现警示框关闭按钮的样式。
    • 3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss="alert"(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。
    <div class="alert alert-success alert-dismissable">
        <button class="close" type="button" data-dismiss="alert">&times;</button><!--实现关闭-->
        恭喜您操作成功!<a href="#" class="alert-link">回首页</a><!--加入链接-->
    </div>
    

    3. 加入链接

    Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。

    十一、进度条

    • 进度条需要使用两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度。
    • 进度条样式(在子容器中加入对应的class即可,不加默认深蓝色):
      • progress-bar-info:表示信息进度条,蓝色
      • progress-bar-success:表示成功进度条,绿色
      • progress-bar-warning:表示警告进度条,黄色
      • progress-bar-danger:表示错误进度条,红色
    • 条纹进度条:在进度条的容器“progress”基础上增加类名“progress-striped”,或者在内部容器中加入类名“progress-bar-striped
    • 动态条纹进度条:在进度条“progress progress-striped”两个类的基础上再加入“active”类名
    • 层叠进度条:将不同状态的进度条放置在一起,按水平方式排列,实现层叠效果。注意,层叠进度条宽度之和不能大于100%
    <div class="progress progress-striped active"><!--设置动态的条纹进度条-->
    	<div class="progress-bar progress-bar-success" style="width:40%"></div><!--设置进度条样式-->
    	<!--只给这段进度条设置条纹样式,并且显示进度的百分比数字-->
    	<div class="progress-bar progress-bar-info progress-bar-striped" style="width:10%">10%</div>
    </div>
    
    • 进度条带Label(xx%):只需要在内部div中添加对应的数字即可,对0%已经做过处理

    十二、媒体对象

    1. 简单的媒体对象

    媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分:

    • 媒体对象的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容
    • 媒体对象的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片
    • 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容
    • 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选
      在这里插入图片描述
    • 在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。
    <div class="media"><!--外部容器-->
        <a class="pull-left" href="#">
        	<!--容器对象-->
        	<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
      	</a>
      	<div class="media-body"><!--对象主体-->
        	<h4 class="media-heading">系列:十天精通CSS3</h4><!--标题-->
        	<div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div><!--正文-->
        	<div class="media"> ...... </div><!--媒体对象的嵌套-->
      	</div>
    </div>
    

    1. 媒体对象列表

    在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media

    <ul class="media-list">
        <li class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src=" " alt="...">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media Header</h4>
                <div></div>
            </div>
        </li>
        <li class="media"></li>
        <li class="media"></li>
    </ul>
    

    十三、列表组

    • 基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分:
      • list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素
      • list-group-item:列表项,常用的是li元素,当然也可以是div元素
    • 带徽章的列表组:
      • 只需要在“list-group-item”中添加徽章组件“badge
    • 带链接的列表组
      • 在基础列表组的基础上,给列表项的文本添加链接,链接的点击区域只在文本上有效
      • 在列表项的任何区域都具备可点击:将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。
    • 自定义列表组:Bootstrap框加在链接列表组的基础上新增了两个样式:
      • list-group-item-heading:用来定义列表项头部样式
      • list-group-item-text:用来定义列表项主要内容
    • 状态效果:在对应的列表项中添加类名:
      • active:表示当前状态(深蓝色)
      • disabled:表示禁用状态(灰色)
    • 列表组风格:
      • 在“list-group-item”基础上增加对应的类名
        • list-group-item-success:成功,背景色绿色
        • list-group-item-info:信息,背景色蓝色
        • list-group-item-warning:警告,背景色为黄色
        • list-group-item-danger:错误,背景色为红色
    <ul class="list-group"><!--列表组容器-->
        <li class="list-group-item"><span class="badge">456</span>揭开CSS3的面纱</li><!--带徽章的列表项-->
    	<li class="list-group-item"><a href="##">CSS3选择器</a></li><!--带链接的列表项,点击区域只在文本上有效-->
    	<li class="list-group-item">CSS3边框</li>
    	<li class="list-group-item list-group-item-warning">CSS3背景</li><!--警告风格的列表项-->
    	<li class="list-group-item">CSS3文本</li>
    </ul>
    <div class="list-group">
    	<a href="##" class="list-group-item">图解CSS3</a><!--带链接的列表项,在列表项的任何区域都具备可点击-->
    	<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a><!--带徽章和链接的列表项-->
    	<a href="##" class="list-group-item"><!--自定义列表项-->
    		<h4 class="list-group-item-heading">图解CSS3</h4><!--定义列表的头部样式-->
    		<p class="list-group-item-text">详细讲解了选择器、边框、...</p><!--定义列表项的主要内容-->
    	</a>
    </div>
    

    十四、面板

    一般情况下可以把面板理解为一个区域,在使用面板的时候,都会在panel-body放置需要的内容,可能是图片、表格或者列表等。

    • 外部div容器运用了“panel”样式,产生一个具有边框的文本显示块。由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”,另外在里面添加了一个“div.panel-body”来放置面板主体内容
    • 设置面板的头部和尾部:
      • panel-heading:用来设置面板头部样式
      • panel-footer:用来设置面板尾部样式
    • 主题样式除了有“panel-default”之外,还有:
      • panel-primary:重点蓝
      • panel-success:成功绿
      • panel-info:信息蓝
      • panel-warning:警告黄
      • panel-danger:危险红
    <div class="panel panel-default">
    	<div class="panel-heading">图解CSS3</div>
        <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
        <table class="table table-bordered"></table><!--加入表格,也可以放到panel-body中-->
        <ul class="list-group"><!--加入列表组,也可以放到panel-body中-->
            <li class="list-group-item">我是列表项</li>
        </ul>
        <div class="panel-footer">作者:大漠</div>
    </div>
    

    十五、模态弹出框

    1. 基本结构

    Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分:

    • 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮
    • 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容
    • 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮
    • 两种尺寸:
      • 大尺寸样式“modal-lg”,
      • 小尺寸样式“modal-sm
    • 为模态弹出框增加过度动画效果:
      • 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。
    <!--声明式触发模态弹框-->
    <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
    <!-- JS触发模态弹出窗元素 -->
    <button class="btn btn-primary" id="btn" type="button">点击我</button>
    <script type="text/javascript">
    	$(function(){
    	  $(".btn").click(function(){
    	    $("mymodal-data").modal();
    	  });
    	});
    </script>
    
    <div class="modal fade" id="mymodal-data" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg"><!--大尺寸弹框-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">模态弹出窗标题</h4>
                </div>
                <div class="modal-body">
                    <p>模态弹出窗主体内容</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    

    2. 触发弹框

    (1) 声明式触发方法:

    方法一:模态弹出窗声明,只需要自定义两个必要的属性:data-toggledata-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss="",比如上例中的按钮

    • 1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器);
    • 2、data-target可以设置为CSS的选择符,也可以设置为模态弹出窗的ID值,一般情况设置为模态弹出窗的ID值,因为ID值是唯一的值。
      方法二:触发模态弹出窗也可以是一个链接<a>元素,那么可以使用链接元素自带的href属性替代data-target属性。

    (2) JS触发

    通过给一个元素一个事件,来触发。比如说给一个按钮一个单击事件,然后触发模态弹出窗。如上例中第二个按钮

    • 使用JavaScript触发模态弹出窗时,Bootstrap框架提供了一些设置,主要包括属性设置、参数设置和事件设置。

      使用方法:
    • 比如你不想让用户按ESC键关闭模态弹出窗,你就可以这样做:
    $(function(){
        $(".btn").click(function(){
            $("#mymodal").modal({
                keyboard:false
            });
        });
    });
    

    在Bootstrap框架中还为模态弹出窗提供了三种参数设置,具体说明如下:

    参数 使用方法 描述
    toggle $(“#mymodal”).modal(“toggle”) 发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示
    show $(“#mymodal”).modal(“show”) 触发时,显示模态弹出窗
    hide $(“#mymodal”).modal(“hide”) 触发时,关闭模态弹出窗

    事件设置:

    • 模态弹出窗还支持四种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后,具体描述如下:
    事件类型 描述
    show.bs.modal 在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性
    shown.bs.modal 该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件
    hide.bs.modal 在hide方法调用时(但还未关闭隐藏)立即触发
    hidden.bs.modal 该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发
    • 调用方法也非常简单:
    $('#myModal').on('hidden.bs.modal', function (e) {
        // 处理代码...
    })
    

    3. 自定义data属性

    除了通过data-toggledata-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性
    在这里插入图片描述

    展开全文
  • GitHub上受欢迎的Android UI Library https://mvnrepository.com/ https://jar-download.com/ https://docs.oracle.com/javase/7/docs/api/ ...

    GitHub上受欢迎的Android UI Library

    https://mvnrepository.com/

    https://jar-download.com/

    https://docs.oracle.com/javase/7/docs/api/

    http://hg.openjdk.java.net/jdk8/jdk8/jdk/file/tip/src/share/classes/java

    https://lanhuapp.com/

    MVP MVVM

    https://github.com/googlesamples/android-architecture

    日志打印

    https://github.com/ZhaoKaiQiang/KLog

    网络请求
    https://github.com/square/retrofit

    事件订阅
    https://github.com/greenrobot/EventBus

    下拉刷新,上拉加载更多
    https://github.com/nuptboyzhb/SuperSwipeRefreshLayout

    视频播放
    https://github.com/CarGuo/GSYVideoPlayer

    流式布局
    https://github.com/google/flexbox-layout

    图片加载
    https://github.com/bumptech/glide

    图片选择器:
    https://github.com/lovetuzitong/MultiImageSelector

    图片放大、缩小
    https://github.com/chrisbanes/PhotoView

    横向中心定位的RecycleView
    https://github.com/chenxinfei/LocateCenterHorizontalView

    收缩、展开的TextView
    https://github.com/Manabu-GT/ExpandableTextView

    日历
    https://github.com/florent37/SingleDateAndTimePicker

    富文本编辑器

    https://github.com/wasabeef/richeditor-android

    组件化

    https://github.com/guiying712/AndroidModulePattern

    气泡提示

    https://github.com/zyyoona7/EasyPopup

    目录

    抽屉菜单

    ListView

    WebView

    SwitchButton

    按钮

    点赞按钮

    进度条

    TabLayout

    图标

    下拉刷新

    ViewPager

    图表(Chart)

    菜单(Menu)

    浮动菜单

    对话框

    空白页

    滑动删除

    手势操作

    RecyclerView

    Card

    Color

    Drawable

    Spinner

    布局

    模糊效果

    TabBar

    AppBar

    选择器(Picker)

    跑马灯

    日历时间

    主题样式

    ImageView

    通知

    聊天视图

    Header

    引导图(Intro)

    图片

    徽章(Badge)

    RatingView

    滚动效果(Scroll)

    时间轴

    TreeView

    SearchView

    TagView

    TextView

    EditText

    Sliding

    表单

    分段控件

    轮播图

    文件操作

    启动页

    MD

    BottomNavigation

    Toast

    CreditCard

    ActionSheet

    Wave

    Snackbar

    用户引导

    滑动返回

    TV组件

    软键盘

    状态栏

    StepView

    表格(Table)

    滚动视差(Parallex)

    关于页面

    详情页

    FAB

    Indicator

    分享组件

    升级更新

    Toolbar

    Sort&Drag

    Emoji

    Label

    WheelView

    PinCode

    CoordinatorLayout

    页面切换

    悬浮窗

    地图

    编辑器

    SeekBar

    DownloadView

    其他

     

    抽屉菜单

    ListView

    WebView

    SwitchButton

    按钮

    点赞按钮

    进度条

    TabLayout

    图标

    下拉刷新

    ViewPager

    图表(Chart)

    菜单(Menu)

    浮动菜单

    对话框

    空白页

    滑动删除

    手势操作

    • sensey ★1890 - 手势交互Android库
    • GestureViews ★1184 - 手势控制和位置动画
    • InboxLayout ★641 - 仿谷歌下拉返回效果
    • Swipper ★47 - 控制亮度的自定义视图

    RecyclerView

    Card

    Color

    Drawable

    Spinner

    布局

    模糊效果

    TabBar

    AppBar

    选择器(Picker)

    跑马灯

    日历时间

    主题样式

    ImageView

    通知

    聊天视图

    引导图(Intro)

    图片

    徽章(Badge)

    RatingView

    滚动效果(Scroll)

    时间轴

    TreeView

    SearchView

    TagView

    TextView

    EditText

    Sliding

    表单

    分段控件

    轮播图

    文件操作

    启动页

    MD

    BottomNavigation

    Toast

    CreditCard

    ActionSheet

    Wave

    Snackbar

    • TSnackBar ★591 - 从顶部显示一个Snackbar
    • SnackbarUtils ★370 - Snackbar工具类
    • CookieBar ★327 - 屏幕的底部或者顶部显示短信息
    • Snacky ★327 - 在布局中添加Snackbar
    • SweetTips ★58 - 快意灵动的提示库

    用户引导

    滑动返回

    TV组件

    软键盘

    状态栏

    StepView

    表格(Table)

    滚动视差(Parallex)

    关于页面

    详情页

    FAB

    Indicator

    分享组件

    • ShareUtil ★762 - 综合性的分享及登录工具库
    • ShareButton ★440 - 一个具有流畅动画的分享按钮
    • GeneratePicture ★123 - 选取页面内容生成精美分享图片

    升级更新

    Toolbar

    Sort&Drag

    Emoji

    • emojicon ★2697 - Android中实现emojis表情
    • EmojiRain ★494 - 小巧的Android掉emoji表情包实现

    Label

    WheelView

    PinCode

    CoordinatorLayout

    页面切换

    悬浮窗

    • FloatUtil ★144 - 简单的浮窗工具
    • NetSpeed ★33 - 悬浮窗网速显示计

    地图

    编辑器

    SeekBar

    DownloadView

    其他


    转自:https://hndeveloper.github.io/2017/github-android-ui.html#DownloadView

     

     

    展开全文
  • 面试整理:Web框架

    2019-07-24 01:07:11
    前端基础 1、基础中的基础 ... CSS ...BootStrap ...也即自适应各种平台,例如...浏览器窗口大小变化时,显示该大小应有的样式。 BootStrap的本质(源码),都是通过各种 CSS 样式实现的。 4、简单实现响应式布局 ...
  • 魔法禁书目录

    2019-10-25 10:10:07
    面试套路如下: 1.请介绍一个你做过的感觉对自己提高最大的项目。(一般就是接下来围绕这个项目问题,所以最好提前准备点亮点); 2.围绕这个项目面试官会提问,所以回答的时候最好提前把业务流程和项目架构想...
  • 写于 2016.05.03 官网地址:jrainlau.github.io/elf/ ...介绍 取名为“精灵”的elf,是一个干净,轻巧的响应式CSS框架。她基于flexbox,旨在快速搭建能够适配不同尺寸设备的响应式布局。 ...elf是纯粹的css框架,首先...
  • 在网络传输中只将数据看作是原始的字节序列。然则,我们的应用程序需要把这些字节序列组成有意义的信息。将应用程序的数据转换为网络格式,以及将网络格式转换为应用程序的数据的组件分别叫作编码器和解码器,同时...
  • 文章转载自 : ... : Elysee2014 主要介绍那些不错个性化的View,包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar及其他如Dialog、Toast、Ed
  • 以下内容来自转载(非常感谢此文第一作者):1.安卓各组件介绍一、ListView二、ActionBar三、Menu四、ViewPager 、Gallery五、GridView六、ImageView七、ProgressBar八、其他2.GitHub上优秀Android开源...乐盒7....
  • 下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar ...
  • android的快速开发框架集合 出自:http://blog.csdn.net/shulianghan/article/details/18046021 1、Afinal (快速开发框架)  简介:http://www.oschina.net/p/afinal  源码:...2、ThinkAnd
  • 收藏的Android三方框架

    2020-01-03 15:14:43
    GitHub上受欢迎的Android UI Library 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 ViewPager 图表(Chart) 菜单(Menu) 浮动菜单 ... Dra...
  • CSDN前1000名博主

    2019-05-26 15:04:42
    博主 简介 stpeace 排名:1 原创:2166 粉丝:7180 积分:181660 等级:10stpeace的专栏中国本博客供大家交流,欢迎各抒己见。博文中的内容禁止用 ...排名:2 原创:5286 粉丝:10660 积分:170616 等级:10袁萌...
  • jvm详解

    2018-05-17 09:46:53
    JVM内存模型总体架构图程序计数器多线程时,当线程数超过CPU数量或CPU内核数量,线程之间就要根据时间片轮询抢夺CPU时间资源。因此每个线程有要有一个独立的程序计数器,记录下一条要运行的指令。...
  • 开源项目和开源框架第一期 图片 Android-Universal-Image-Loader★15152 - 异步图像加载程序 ...glide★15006 - 媒体管理和图片加载框架 ...PhotoView★9843 - 简单可用的放大安卓ImageView
  • Java超级大火锅

    2016-07-22 19:31:26
    实习换语言到Java,基础很多需要整理,专门为Java开一个大火锅~~1、事务 事务指的是逻辑上的一组操作,这组操作要么全部成功,要么全部失败。 事务的4大特性:ACID,指数据库事务正确执行的四个基本要素的缩写。...
  • 我们知道,lua通过lua_State堆栈可以很方便的与C语言进行交互 ...也可以调用专门为lua调用而封装的C库。 具体步骤: 1.原C文件中引入lua相关头文件 #include "lua.h" #include "lualib.h" #include "lauxlib.h"2....
  • 每个Java开发者都知道Java字节码是执行在JRE(Java Runtime Environment Java运行时环境)上的。JRE中最重要的部分是Java虚拟机(JVM),JVM负责分析和执行Java字节码。Java开发人员并不需要去关心JVM是如何运行的。...
  • 博主 简介 stpeace 排名:1 原创:2166 粉丝:7180 积分:181660 等级:10 stpeace的专栏 中国 本博客供大家交流,欢迎各抒己见... 排名:2 原创:52...
1 2 3 4 5 ... 20
收藏数 736
精华内容 294
关键字:

bootstrap魔太框大小