当前位置：文档之家› bootstrap notes

bootstrap notes

Bootstrap notes 【done!】
https://https://www.doczj.com/doc/ec18752188.html,/question/37946473
https://https://www.doczj.com/doc/ec18752188.html,/almasaeed2010/AdminLTE

-表格

-- 带边框的表格。

-- 可以复合配置。

-- Bootstrap中紧凑型的表格与基础表格差别只是将单元格的内距由8px调至5px。

-- 属性放在外层容器中，使容器内的表格具有这种效果。

Less和Sass都是CSS的扩展
-表单
class="sr-only" -- sr就是screen reader，盲人看不见页面的效果（placeholder里的文字），sr会把里面的文字念出来

-- 单行输入框，type表示类型，placeholder备注信息
-- form-control，为了让控件在各种表单风格中样式不出错
-- 多行选择

-- 文本域<br><div class="checkbox"><br><label><br><input type="checkbox" value=""><br>记住密码<br></label><br></div><br>--1、不管是checkbox还是radio都使用label包起来了<br>--2、checkbox连同label标签放置在一个名为“.checkbox”的容器内<br>--3、radio连同label标签放置在一个名为“.radio”的容器内<br><label class="checkbox-inline"><br><label class="radio-inline"><br>--单选和复选水平放置<br>表单控件大小<br>--1、input-sm:让控件比正常大小更小<br>--2、input-lg:让控件比正常大小更大<br>添加属性“disabled” -- 表示不能用<br><div class="form-group has-success has-feedback"> <br><span class="glyphiconglyphicon-warning-sign form-control-feedback"></span><br>--将状态显示在输入框后<br><span class="help-block"> -- 显示信息<br>-按钮<br>风格<br>btn-default<br>btn-primary<br>btn-success<br>btn-info<br>btn-warning<br>btn-danger<br>btn-link<br>大小<br>btn-sm<br>btn-xs<br>btn-lg<br>禁用按钮有两种实现方式：<br>--1、在标签中添加disabled属性<br>--2、在元素标签中添加类名“disabled”<br>-图像<br>图像风格<br>--1、img-responsive：响应式图片，主要针对于响应式设计<br>--2、img-rounded：圆角图片<br>--3、img-circle：圆形图片<br>--4、img-thumbnail：缩略图片<br><span class="glyphicon glyphicon-search"></span> --显示图标<br>-网格系统<br>通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)<br><div class="col-sm-4"> 每一行中的几列<br>push/pull<br>嵌套<br>-下拉菜单<br>在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。<br>因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。<br>--1、使用一个<br></p><p>名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:<br><div class="dropdown"></div><br>--2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，<br>且值必须和最外容器类名一致，此示例为:<br>data-toggle="dropdown"<br>--3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:<br><ul class="dropdown-menu"><br>--按钮下拉菜单<br><div class="btn-group"><br><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button><br><ul class="dropdown-menu"><br>原理：<br>--通过js技术手段，给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。<br>下拉分割线<br>--<li role="presentation" class="divider"></li><br>菜单标题<br>--<li role="presentation" class="dropdown-header">第一部分菜单头部</li><br>按钮组<br>--<div class="btn-group"><br>--<div class="btn-group-vertical"> 垂直<br>--<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button><br>--button中嵌套一个span图标<br>按钮工具栏<br>--<div class="btn-toolbar"><br>等分按钮<br>--<div class="btn-wrap"> <br>--<div class="btn-group btn-group-justified"><br>按钮的向下向上三角形<br>--三角形是通过css生成的<br>--<span class="caret"></span> 按钮中加入这个span<br>--<div class="btn-group dropup"> 向上<br>导航栏<br>--<ul class="nav nav-tabs"><br>--<ul class="nav nav-pills"> 胶囊形<br>--<ul class="nav nav-pills nav-stacked"> 垂直堆叠的导航<br>--<ul class="nav nav-tabs nav-justified"> 自适应导航<br>--<ul class="dropdown-menu"> 二级导航<br>--<ol class="breadcrumb"> 面包屑(Breadcrumb)一般用于导航<br>导航条<br>--在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单<br>--第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”<br>第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”<br>--<div class="navbar-header"> <a href="##" class="navbar-brand">慕课网</a> 导航栏标题<br>--<form action="##" class="navbar-form navbar-left" rol="search"> 导航中加入表单以及表单样式<br>--1、导航条中的按钮navbar-btn<br>2、导航条中的文本navbar-text<br>3、导航条中的普通链接navbar-link<br>--.navbar-fixed-top：导航条固定在浏览器窗口顶部<br>.navbar-fixed-bottom：导航条固定在浏览器窗口底部<br>--响应式：<br><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <br>header中加入一个button<br><div class="collapse navbar-collapse navbar-responsive-collapse"> 内容写在其中<br>--反色导航条 <div class="navbar navbar-inverse"><br><br></p><p>--带页码的分页导航 ul>li>a <ul class="pagination pagination-lg（大小）"><br>--分页导航 <ul class="pager"> previous、next 一个居左，一个居右样式：<br>--徽章 <a href="#">Inbox <span class="badge">42</span></a><br>缩略图<br>--<div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"><br>--<div class="caption"> 缩略图下面的说明<br>警示框：<br><div class="alert alert-success" role="alert"> 其中类型有：success、info、warning、danger<br>可关闭：1、alert-dismissable<br>2、<button class="close" type="button" data-dismiss="alert">×</button><br>3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"<br>插入链接会显示高亮<br>进度条：<br><div class="progress"><br><div class="progress-bar progress-bar-success" style="width:20%"></div><br></div><br>即div(progress)/div(progress-bar)<br>progress-bar-success、info、danger、warning<br>progress progress-striped 条纹<br>progress progress-striped active 动态 注：progress-striped”和“active”<br>层叠进度条：子div（progress）放在同一个容器中<div class="progress"><br>带Label的进度条：在div标签内输入文字<br>媒体对象<br>媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容<br>媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片<br>媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容<br>媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选<br>div(class="media")/media-object、（media-body/media-heading）<br>嵌套：只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”<br>列表类型：<br>在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”。<br>即<ul class="media-list">/<li class="media"><br>列表组 --去掉了列表符号的列表项，并且配上一些特定的样式。ul(class="list-group")/li(class="list-group-item")<br>list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素 <ul class="list-group"><br>list-group-item：列表项，常用的是li元素，当然也可以是div元素 <li class="list-group-item"><br>带徽章：li/badge<br>带链接的列表组:li/a<br>自定义列表组：<br>list-group-item-heading：用来定义列表项头部样式<br>list-group-item-text：用来定义列表项主要内容<br>列表状态：active、disabled<br>列表颜色：<br>list-group-item-success：成功，背景色绿色<br>list-group-item-info：信息，背景色蓝色<br>list-group-item-warning：警告，背景色为黄色<br>list-group-item-danger：错误，背景色为红色<br>面板<br><div class="panel panel-default"><br><div class="panel-heading">...</div><br><div class<br></p><p>="panel-body">...</div><br><div class="panel-footer">...</div><br></div><br>样式<br>panel-primary：重点蓝<br>panel-success：成功绿<br>panel-info:信息蓝<br>panel-warning：警告黄<br>panel-danger：危险红<br>panel-default改为上述就可以<br>嵌套table<br>1、直接写在panel-body中<br>2、写在外层，即与panel-body同级<br>嵌套list-group 同table<br>模态弹出框<br>modal > modal-dialog > modal-content > modal-header modal-body modal-footer<br>声明式触发方法：<br>方法一：模态弹出窗声明，只需要自定义两个必要的属性：<br>data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。<br>比如data-toggle="" 或者 data-dismiss=""）。<br>1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；<br>2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，<br>一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。<br>方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性<br><a class="btn btn-primary" data-toggle="modal" href="#mymodal-link"><br>为弹出框增加过度动画效果：<br>给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。<br>模态弹出窗的使用（data-参数说明）<br></p>
        <div>
            <div>相关主题</div>
            <div class="relatedtopic">
                <div id="tabs-section" class="tabs">
                    <ul class="tab-head">
                            <li id="20515513"><a href="/topic/20515513/" target="_blank">bootstrap入门</a></li>
                            <li id="14004222"><a href="/topic/14004222/" target="_blank">科技公司ppt模板</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div>文本预览</div>
            <div class="textcontent">
                
            </div>
        </div>
    </div>
    <div class="category">
        <span class="navname">相关文档</span>
        <ul class="lista">
                <li><a href="/doc/9e2071419.html" target="_blank">响应式网页开发基础教程(jQuery+Bootstrap)第4章 Bootstrap基础</a></li>
                <li><a href="/doc/b4598015.html" target="_blank">bootstrap教程ppt</a></li>
                <li><a href="/doc/cf18844906.html" target="_blank">BootStrap开发技术课程标准</a></li>
                <li><a href="/doc/1e6104448.html" target="_blank">适合初学者的教程——Bootstrap下拉菜单(Dropdown)插件</a></li>
                <li><a href="/doc/f53090706.html" target="_blank">Bootstrap笔试题</a></li>
                <li><a href="/doc/618359099.html" target="_blank">适合初学者的教程——Bootstrap导航栏</a></li>
                <li><a href="/doc/ab4770185.html" target="_blank">个人学习总结-BootStrap入门教程</a></li>
                <li><a href="/doc/be14637053.html" target="_blank">适合初学者的教程——Bootstrap网格系统</a></li>
                <li><a href="/doc/d017755405.html" target="_blank">BootStrap入门教程==</a></li>
                <li><a href="/doc/4f14616111.html" target="_blank">适合初学者的教程——Bootstrap警告框(Alert)插件</a></li>
                <li><a href="/doc/9c776410.html" target="_blank">《BootStrap开发技术》课程标准</a></li>
                <li><a href="/doc/a119038620.html" target="_blank">适合初学者的教程——Bootstrap超大屏幕(Jumbotron)</a></li>
                <li><a href="/doc/c26547765.html" target="_blank">BootStrap入门学习(2)</a></li>
                <li><a href="/doc/0f5278160.html" target="_blank">Bootstrap入门与布局教程</a></li>
                <li><a href="/doc/ed16159104.html" target="_blank">BootStrap入门教程</a></li>
                <li><a href="/doc/6a8184375.html" target="_blank">《BootStrap开发技术》课程标准</a></li>
                <li><a href="/doc/9c18803564.html" target="_blank">适合初学者的教程——Bootstrap模态框(Modal)插件</a></li>
                <li><a href="/doc/b58932957.html" target="_blank">Bootstrap</a></li>
                <li><a href="/doc/d49192219.html" target="_blank">适合初学者的教程——Bootstrap滚动监听(Scrollspy)插件</a></li>
                <li><a href="/doc/2f6946247.html" target="_blank">《BootStrap开发技术》课程标准.doc</a></li>
        </ul>
        <span class="navname">最新文档</span>
        <ul class="lista">
                <li><a href="/doc/0619509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li>
                <li><a href="/doc/0a19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li>
                <li><a href="/doc/9619184372.html" target="_blank">自然教育课件</a></li>
                <li><a href="/doc/3319258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li>
                <li><a href="/doc/d719211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li>
                <li><a href="/doc/a519240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li>
                <li><a href="/doc/9019184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li>
                <li><a href="/doc/8819195909.html" target="_blank">高中语文知识点整理总结</a></li>
                <li><a href="/doc/8319195910.html" target="_blank">高中语文知识点归纳</a></li>
                <li><a href="/doc/7b19336998.html" target="_blank">高中语文基础知识点总结大全</a></li>
                <li><a href="/doc/7019336999.html" target="_blank">超详细的高中语文知识点归纳</a></li>
                <li><a href="/doc/6819035160.html" target="_blank">高考语文知识点总结高中</a></li>
                <li><a href="/doc/6819035161.html" target="_blank">高中语文知识点总结归纳</a></li>
                <li><a href="/doc/4219232289.html" target="_blank">高中语文知识点整理总结</a></li>
                <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li>
                <li><a href="/doc/2a19396978.html" target="_blank">高中语文知识点归纳(大全)</a></li>
                <li><a href="/doc/2c19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li>
                <li><a href="/doc/1619338136.html" target="_blank">高中语文基础知识点整理</a></li>
                <li><a href="/doc/e619066069.html" target="_blank">化工厂应急预案</a></li>
                <li><a href="/doc/b019159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li>
        </ul>
    </div>
</div>
<script>
    var sdocid = "efc84c7cdd88d0d232d46a0e";
</script>
<script type="text/javascript">bdtj();</script>

<footer class="footer">
        <p><a href="/tousu.html" target="_blank">侵权投诉</a> © 2022 www.doczj.com  <a href="/sitemap.html">网站地图</a></p>
        <p>
            <a href="https://beian.miit.gov.cn" target="_blank">闽ICP备18022250号-1</a>  本站资源均为网友上传分享，本站仅负责分类整理，如有任何问题可通过上方投诉通道反馈
            <script type="text/javascript">foot();</script>
        </p>
    </footer>
</body>
</html>