Bootstrap学习笔记（3）

Bootstrap表格 表格类： .table只会在表行之间增加横线; .table-striped会在表格行之间增减斑马线; .table-hover会给表设置鼠标悬停状态; .table-border会为所有的表格添加边框; .table-condensed让表格更加紧凑; tr,td,th类 .active让某一行单元格或者行处于激活状态; .success表示成功的样式; .warning表示警告的样式; .danger表示危险的样式; .info表示信息的样式;

表单类：

创建表单的基本步骤 (1)首先向form元素添加role="form"; (2)把标签和控件放在一个带有class .form-group的中，这是获取最佳间距锁必须的; (3)向所有的文本元素

和<select>添加class .form-control;<strong>  几种表单格式；</strong><strong> </strong><span class="Apple-converted-space"> 垂直表单-采用以上样式创建的普通表单;</span>  水平表单-在form中增加class .form-horizontal；  内联表单-在form中增加class .form-inline,对于标签元素可以使用.sr-only来隐藏该标签元素（label）<strong>  支持的表单控件:</strong>  input,textarea,checkbox,radio,select(可以增加multiple实现多选)  这里特别说明一点,实现内联的复选框或者单选按钮使用checkbox-line属性.  如果想在想放置纯文本那么可以对<p>元素使用.form-control-static <span class="Apple-converted-space"> <strong>表单控件状态:</strong></span>  可以对div设置has-warning,has-error,has-success来显示内部控件的状态.  可以设置.input-large或者.input-sm来显示控件的大小,或者使用col-lg-*来显示控件占的列数.  可以使用.class-bloc来显示一段内容的解释.  <strong>图片:</strong><ul class="list"><li><em>.img-rounded</em>：添加 <em>border-radius:6px</em> 来获得图片圆角。</li><li><em>.img-circle</em>：添加 <em>border-radius:50%</em> 来让整个图片变成圆形。</li><li><em>.img-thumbnail</em>：添加一些内边距（padding）和一个灰色的边框。</li><li>.img-responsive 图片响应式 (将很好地扩展到父元素)</li></ul>								</td></tr></table></div>
    
   <div class="textbot">        
  <ul>
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
     <li>上一篇：<a href='/wangyezhizuo/2018-09-21/14685.html'>[css3] 看博客学习别人的旋转的星球</a></li>
     <li>下一篇：<a href='/wangyezhizuo/2018-09-21/14687.html'>这可能是史上最全的CSS自适应布局总结</a></li>
    </ul></div>
  </div>
</td><td valign="top">

<div id="sidebar">
<div class="sider2" id="column">
       <div class="title">栏目导航</div>
       <ul class="li_float_l"><li><a href="/php/" title="php">php</a></li><li><a href="/asp/" title="asp">asp</a></li><li><a href="/jsp/" title="jsp">jsp</a></li><li><a href="/JavaScript/" title="JavaScript">JavaScript</a></li><li><a href="/XML/" title="XML">XML</a></li><li><a href="/C/" title="C">C</a></li><li><a href="/dos/" title="系统">系统</a></li><li><a href="/wangyezhizuo/" title="网页">网页</a></li><li><a href="/MySQL/" title="MySQL">MySQL</a></li><li><a href="/ACCESS/" title="ACCESS">ACCESS</a></li><li><a href="/shujujiegou/" title="数据结构">数据结构</a></li><li><a href="/vc/" title="VC">VC</a></li><li><a href="/Delphi/" title="Delphi">Delphi</a></li><li><a href="/e/action/ListInfo/?classid=22" title="微信">微信</a></li><li><a href="/e/action/ListInfo/?classid=24" title="PS">PS</a></li><li><a href="/lanqiu/" title="篮球">篮球</a></li><li><a href="/fuli/" title="福利">福利</a></li></ul>
       <div class="clear"></div>
     </div>
      <div class="sider2">
       <div class="title">相关文章</div>
       无相关信息      </div>
      <div class="sider2">
       <div class="title">推荐文章</div>
       <ul></ul>	<div class="more"><a href="/rec.html">更多推荐 >></a></div>
      </div>
      <div class="sider2">
       <div class="title">栏目更新</div>
       <script src='/d/js/class/class8_newnews.js'></script>
	<div class="more"><a href="/new.html">更多更新 >></a></div>
     </div>
      <div class="pad-all ad-sider"><script type="text/javascript" src="/d/js/acmsd/gg2.js"></script></div>
      <div class="pad-all">
       <div class="title2">您的展示窗口</div>
       <div class="ad-siderGG">

</div>
     </div>
 </div>
</td></tr></table>
 <div id="footer">
   <div id="botNav"><a href="/" >网站首页</a> | <a href="/php/" title="php">php</a> | <a href="/asp/" title="asp">asp</a> | <a href="/jsp/" title="jsp">jsp</a> | <a href="/JavaScript/" title="JavaScript">JavaScript</a> | <a href="/XML/" title="XML">XML</a> | <a href="/C/" title="C">C</a> | <a href="/dos/" title="系统">系统</a> | <a href="/wangyezhizuo/" title="网页">网页</a> | <a href="/MySQL/" title="MySQL">MySQL</a> | <a href="/ACCESS/" title="ACCESS">ACCESS</a> | <a href="/shujujiegou/" title="数据结构">数据结构</a> | <a href="/vc/" title="VC">VC</a> | <a href="/Delphi/" title="Delphi">Delphi</a> | <a href="/e/action/ListInfo/?classid=22" title="微信">微信</a> | <a href="/e/action/ListInfo/?classid=24" title="PS">PS</a> | <a href="/lanqiu/" title="篮球">篮球</a> | <a href="/fuli/" title="福利">福利</a> |  <a href="#">返回顶部</a></div>
   <div id="copyright">
    <ul>
    <li>版权所有 2017-2025 电脑技术 最佳分辨率 1024×768  Powered by inter.red</li>
     <li>Copyright © <a href="http://www.pcpol.com">www.pcpol.com</a>, All rights reserved.  
  <a href="https://beian.miit.gov.cn/"  target=_blank>京ICP备2021029896号-7</a>
<noscript></noscript></li>

</ul>
   </div>
  </div>

</div>
<script src="/e/public/onclick/?enews=donews&classid=8&id=14686"></script></body>
</html>