bootstrap
普通网友
这个作者很懒,什么都没留下…
展开
-
bootstrap的导航栏
<div class="container"> <h1 class="page-header">导航</h1> <!--样式:.navbar-fixed-top 是将导航永远显示在最顶端 .navbar-fixed-bottom 在下端 .navbar-inner 会为导航栏添加背景和应有原创 2015-06-21 01:47:18 · 817 阅读 · 0 评论 -
bootstrap的表单标签
表单标签 <div class="container"> <h1 class="page-header">表单</h1> <!-- 这里for的值必须和input的Id的值一致 ,一一相对应--> <label for="userId">用户名</label> <input id="userId" type="text"原创 2015-06-15 22:32:47 · 408 阅读 · 0 评论 -
bootstrap布局:网格布局
网格布局 <div class="container"> <h1 class="page-header"> 布局<small>使用Bookstrap网格布局网页</small> </h1> <div class="row"> <div class="span3">dasdasdsadsadadasd原创 2015-06-14 19:17:37 · 1149 阅读 · 0 评论 -
bootstrap响应式布局的控制原理
响应式布局 响应式布局使用css3的@media这个属性来控制的。<style type="text/css">body { background-color: #000;/*默认的背景色为heise*/}@media(max-width:767px){ body{background-color: #f00;}/*页面宽度小于767px就会变成红色*//*是html5的特性原创 2015-06-14 22:47:28 · 3712 阅读 · 0 评论 -
bootstrap列表
列表 <div class="container"> <h1 class="page-header"> 列表<small>有序列表、无序列表、描述列表</small> </h1> <h2>有序列表</h2> <ol> <li>order1</li> <li>or原创 2015-06-15 00:12:33 · 445 阅读 · 0 评论 -
bootstrap响应式布局
把已有的固定宽度布局转换成响应式布局<link href="/bootstrapTest/cs/bootstrap-responsive.css" rel="stylesheet" type="text/css"/> <div class="container"> <h1 class="page-header"> (流动式)响应式布局<small>使用Boo原创 2015-06-14 22:57:02 · 1720 阅读 · 0 评论 -
bootstrap布局:嵌套布局和流动布局
嵌套布局 <div class="container"> <h1 class="page-header"> 布局<small>使用Bookstrap网格系统布局网页</small> </h1> <p>asdfadsfaasdfasdf 阿斯顿发的事发adfasdf都发生地方阿斯顿发撒的发生到付asd原创 2015-06-14 20:16:50 · 8266 阅读 · 0 评论 -
bootstrap的文本框的前缀和后缀,单选框和复选框
文本框的前后缀 <div class="container"> <h1 class="page-header">文本框的前缀和后缀</h1> <div class="input-prepend input-append"> <span class="add-on">¥</span><input type="text"><span原创 2015-06-15 22:59:31 · 4124 阅读 · 0 评论 -
bootstrap的常用标签与样式
常用标签与样式<div class="container"> <h1 class="page-header"> CSS<small>常用的 CSS</small> </h1> <p> <abbr class="initialism" title="关键字">CMS</abbr> 当时发生的发生的啊时代发生的发生aaa <strong>重要的文字 </原创 2015-06-14 23:53:24 · 1181 阅读 · 0 评论 -
bootstrap响应式布局的实用类
实用类 <div class="container"> <h1 class="page-header">响应式布局的实用类<small>bootstrap网格系统布局</small></h1> <div class="row"> <div class="page-header clearfix">原创 2015-06-14 23:29:57 · 814 阅读 · 0 评论 -
bootstrap的导航路径和分页器
导航路径和分页器<div class="container"> <h1 class="page-header">导航路径与分页器</h1> <ul class="breadcrumb"><!-- 把设计好的导航路径的样式引进来 --> <li><a href="#">首页</a><span class="divider">/</span></l原创 2015-06-21 15:33:04 · 1947 阅读 · 0 评论 -
bootstarap的提示信息和缩略图
提示信息<div class="container"> <h1 class="page-header">提示信息</h1> <div class="alert alert-block"> <!-- alert使用bootstrap的提示信息的样式 alert-block为提示信息添加边框 -->原创 2015-06-21 16:08:49 · 1006 阅读 · 0 评论 -
bootstrap的选项卡和选项卡的内容
选项卡 <div class="container"> <h1 class="page-header">选项卡</h1> <!--nav-pills,nav-tabs,nav-stacked :改变选项卡的样式--> <ul class="nav nav-pills"> <li class="active"><a href原创 2015-06-21 15:13:24 · 10001 阅读 · 2 评论 -
bootstrap的选择列表和表单
选择列表 <div class="container"> <h1 class="page-header">选择列表</h1> <label for="specialty">选择专业</label> <!--属性为:multiple表示是多选列表--> <select id="specialty" multiple="mul原创 2015-06-20 18:16:19 · 2805 阅读 · 0 评论 -
bootstrap折叠内容
折叠内容 bootstrap-collapse.js添加该插件 <div class="accordion" id="accordion1"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accor原创 2015-06-21 19:28:08 · 500 阅读 · 0 评论 -
bootstrap的下拉菜单
下拉菜单 在使用bootstap需要使用到一个jQuery的查件,这个插件就是twitter.github.com/bootstrap/javascript.html#dropdowns。 然后就在页面在加入进jQuery就可以。 <div class="container"> <h1 class="page-header"> 按钮<small>带下原创 2015-06-21 00:03:39 · 519 阅读 · 0 评论 -
bootstrap的按钮和按钮群组
按钮 <div class="container"> <h1 class="page-header"> 按钮<small>按钮的基本样式</small> </h1> <div style="margin-bottom: 15px"> <a href="#" class="btn btn-large原创 2015-06-20 23:31:12 · 1277 阅读 · 0 评论 -
bootstrap的对话框和提示信息
对话框 对话框要添加的插件bootstrap-modal.js <div class="container"> <h1 class="page-header">对话框</h1> <!-- form-horizontal 表单的样式布局 --> <a href="#login" data-toggle="modal" class="btn bt原创 2015-06-21 19:09:49 · 3477 阅读 · 1 评论 -
bootstrap的表格
默认表格 <h1 class="page-header"> 表格<small><table></small> </h1> <h2>默认的表格</h2> <table class="table"><!--class="table"默认的样式--> <thead>原创 2015-06-15 22:23:53 · 496 阅读 · 0 评论