BootStrap学习笔记之BootStrap常用组件介绍

　　1、图标：

　　<spanclass="glyphiconglyphicon-home"></span>

　　<spanclass="glyphiconglyphicon-signal"></span>

　　<spanclass="glyphiconglyphicon-cog"></span>

　　<spanclass="glyphiconglyphicon-apple"></span>

　　<spanclass="glyphiconglyphicon-trash"></span>

　　<spanclass="glyphiconglyphicon-play-circle"></span>

　　<spanclass="glyphiconglyphicon-headphones"></span>

　　2、按钮：

　　<buttontype="button"class="btnbtn-default">按钮</button>

　　<buttontype="button"class="btnbtn-primary">primary</button>

　　<buttontype="button"class="btnbtn-success">success</button>

　　<buttontype="button"class="btnbtn-info">info</button>

　　<buttontype="button"class="btnbtn-warning">warning</button>

　　<buttontype="button"class="btnbtn-danger">danger</button>

　　1.png

　　3、按钮尺寸：

　　<buttontype="button"class="btnbtn-default">按钮</button>

　　<buttontype="button"class="btnbtn-primarybtn-lg">primary</button>

　　<buttontype="button"class="btnbtn-successbtn-sm">success</button>

　　<buttontype="button"class="btnbtn-infobtn-xs">info</button>

　　4、把图标显示在按钮里：

　　<h3>把图标显示在按钮里</h3>

　　<buttontype="button"class="btnbtn-default"><spanclass="glyphiconglyphicon-home"></span>按钮</button>

　　5、下拉菜单：

　　<pclass="dropdown">

　　<buttonclass="btnbtn-primarydropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown"aria-haspopup="true"aria-expanded="true">

　　<spanid="dropdown-title">菜单一</span>

　　<spanclass="caret"></span>

　　</button>

　　<ulclass="dropdown-menu"aria-labelledby="dropdownMenu1">

　　</ul>

　　</p>

　　交互：监听每个菜单的点击事件，点击之后在title显示当前菜单

　　$('.dropdown-item').click(function(){

　　$('#dropdown-title').text($(this).text());

　　});

　　6、输入框：

　　<pclass="input-group">

　　<spanclass="glyphiconglyphicon-user"></span>

　　<inputtype="text"placeholder="username">

　　</p>

　　<pclass="input-group">

　　<spanclass="glyphiconglyphicon-lock"></span>

　　<inputtype="password"placeholder="password">

　　</p>

　　7、导航栏：

　　<navclass="navbarnavbar-inversenavbar-fixed-top">

　　<pid="navbar"class="navbar-collapsecollapse">

　　<ulclass="navnavbar-nav">

　　<liclass="active"><ahref="#">Home</a></li>

　　<li><ahref="#about">About</a></li>

　　<li><ahref="#contact">Contact</a></li>

　　<liclass="dropdown">

　　<ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-expanded="false">Dropdown<spanclass="caret"></span></a>

　　<ulclass="dropdown-menu"role="menu">

　　<li><ahref="#">Action</a></li>

　　<li><ahref="#">Anotheraction</a></li>

　　<liclass="pider"></li>

　　<liclass="dropdown-header">Navheader</li>

　　<li><ahref="#">Separatedlink</a></li>

　　</ul>

　　</li>

　　</ul>

</p>

　　</p>

　　</nav>

　　8、表单：

　　<form>

　　<pclass="form-group">

　　<spanclass="glyphiconglyphicon-user"></span>

　　<inputtype="email"id="exampleInputEmail1"placeholder="Enteremail">

　　</p>

　　<pclass="form-group">

　　<spanclass="glyphiconglyphicon-lock"></span>

　　<inputtype="password"id="exampleInputPassword1"placeholder="Password">

　　</p>

　　<pclass="form-group">

　　<labelfor="exampleInputFile">Fileinput</label>

　　<inputtype="file"id="exampleInputFile">

　　<pclass="help-block">Exampleblock-levelhelptexthere.</p>

　　</p>

　　<pclass="checkbox">

　　<label>

　　<inputtype="checkbox">Checkmeout

　　</label>

　　</p>

　　<buttontype="submit"class="btnbtn-default">Submit</button>

　　</form>

　　9、警告框：

　　<pclass="alertalert-warningalert-dismissible"role="alert">

　　<buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><spanaria-hidden="true">×</span></button>

　　<strong>Warning!</strong>Bettercheckyourself,you'renotlookingtoogood.

　　</p>

　　<pclass="alertalert-success"role="alert">

　　<ahref="#"class="alert-link">success!</a>

　　</p>

　　<pclass="alertalert-info"role="alert">

　　<ahref="#"class="alert-link">info!</a>

　　</p>

　　<pclass="alertalert-warning"role="alert">

　　<ahref="#"class="alert-link">warning!</a>

　　</p>

　　<pclass="alertalert-danger"role="alert">

　　<ahref="#"class="alert-link">danger!</a>

　　</p>

　　10、进度条：

　　<pclass="progress">

　　<pclass="progress-bar"role="progressbar"aria-valuenow="70"aria-valuemin="0"aria-valuemax="100"style="width:60%;">

　　70%

　　</p>

　　11、靠右排列

　　一般我们是用float:right来实现向右浮动的功能的，但是这里面右涉及了清除浮动、调整右边的margin、上下的margin等等问题，在bootstrap当然要用他的方法，只要添加一个class：pull-right就可以解决：

　　<spanstyle="font-size:30px;">item1</span>

　　<pclass="pull-right">item2</p>

　　这第一行是要跟第二行在一个水平线上的，所以第一行不能用<h1>之类的，因为这种元素自带换行功能。

　　12、tab的使用

　　tab可以方便的在一个页面里面切换显示的内容，bootstrap的tab使用非常简单：

　　<ulid="myTab"class="navnav-tabs">

　　<lirole="presentation"class="active"><ahref="#tab1"data-toggle="tab">tab1</a></li>

　　<lirole="presentation"><ahref="#tab2"data-toggle="tab">tab2</a></li>

　　<lirole="presentation"><ahref="#tab3"data-toggle="tab">tab3</a></li>

　　</ul>

　　<span>这是宝贝管理页面</span>

　　<pid="myTabContent"class="tab-content">

　　<pid="tab1"class="tab-paneactive">

　　<p>这是tab1</p>

　　</p>

　　<pid="tab2"class="tab-pane">

　　<p>这是tab2</p>

　　</p>

　　<pid="tab3"class="tab-pane">

　　<p>这是tab3</p>

　　</p>

　　在js可以方便的捕捉tab的切换，并做出相应的改变，比如当第二个页面是加载一些数据，那么我等到切换到第二个页面我再去加载：

　　$('a[data-toggle="tab"]').on('shown.bs.tab',function(e){

　　varactiveTab=$(e.target).text();

　　alert(activeTab);

　　});

　　13、bootstrap-table

　　一个可以通过ajax请求json数据并生成表格的插件

　　项目地址：

　　https://github.com/wenzhixin/bootstrap-table

　　14、通知消息组件

　　<1>下载地址：

　　https://github.com/CodeSeven/toastr

　　<2>文档：

　　http://www.ithao123.cn/content-2414918.html

　　<3>引入：

　　在下载的文件里找到build文件夹，引入里面的toastr.min.js和toastr.css

　　<4>使用：

　　此提示消息默认是显示在浏览器的右上角，我们可以在初始化里面改为顶部居中显示：

　　toastr.options.positionClass='toast-top-center';//显示位置

　　位置显示的设定有如下选项：

　　toast-top-right

　　toast-botton-right

　　toash-bottom-left

　　toast-top-left

　　toast-top-full-width这个是在网页顶端，宽度铺满整个屏幕

　　toast-bottom-full-width

　　toast-top-center顶端中间

　　toast-bottom-center

　　然后在我们需要显示的时候这样调用就行了：

　　toastr.success('提交数据成功');

　　toastr.error('Error');

　　toastr.warning('只能选择一行进行编辑');

　　toastr.info('info');

　　15、ajax请求

　　按钮：

　　<buttonclass="btnbtn-link">

　　换个密码

　　</button>

　　js：

　　$('.btn').on('click',function(){

　　$.post('xxx')

　　.done(function(result){

　　varjson=ajaxResultShow(result);

　　if(json.result_code==0)

　　$('#pwdId').text(json.data1);

　　})

　　.fail(function(){

　　})

　　.always(function(){

　　});

　　16、bootstrap-switch

　　（1）此组件不属于bootstrap，他需要单独引入bootstrap-switch.min.js和bootstrap-switch.min.css；

　　（2）下载地址：http://www.bootcss.com/p/bootstrap-switch/

　　（3）使用方法：

　　添加框架：

　　<linkhref="bootstrap.css"rel="stylesheet">

　　<linkhref="bootstrap-switch.css"rel="stylesheet">

　　<scriptsrc="jquery.js"></script>

　　<scriptsrc="bootstrap-switch.js"></script>

　　在html中添加组件：

　　<inputtype="checkbox"name="my-checkbox"checked>

　　在js中初始化：

　　$("[name='my-checkbox']").bootstrapSwitch();

　　可以在初始化中直接对状态进行设定：

　　$("#isOpenCheckbox").bootstrapSwitch('state',false);

　　切换状态：

　　$('#isOpenCheckbox').bootstrapSwitch('toggleState');

　　监听切换事件：

　　$('#isOpenCheckbox').on('switchChange.bootstrapSwitch',function(event,state){

　　alert(state);//true||false

　　});

　　总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54528.shtml