初步认识Bootstrap3-响应式网站设计
时间：2023-05-09 18:12:02 | 来源：网站运营
时间：2023-05-09 18:12:02 来源：网站运营
初步认识Bootstrap3-响应式网站设计：
一、下载源码 进入Bootstrap中文网后，依次点击导航中的“Bootstrap3中文文档”—>“起步”->“下载Bootstrap”，在打开的页面中选择“Bootstrap源码”，然后点击“下载源码”，根据提示下载解压即可。
二、Cdn加速 <!--最新版本的Bootstrap核心CSS文件-->
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous">
<!--可选的Bootstrap主题文件（一般不用引入）-->
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous">
<!--最新的Bootstrap核心JavaScript文件-->
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script>
三、目录结构 bootstrap/
├──less/
├──js/
├──fonts/
├──dist/
│├──css/
│├──js/
│└──fonts/
└──docs/
└──examples/
less/、js/和fonts/目录分别包含了CSS、JS和字体图标的源码。
dist/目录包含了上面所说的预编译Bootstrap包内的所有文件。
docs/包含了所有文档的源码文件，examples/目录是Bootstrap官方提供的实例工程。除了这些，其他文件还包含Bootstrap安装包的定义文件、许可证文件和编译脚本等。
四、基本模板 <!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<!--上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！-->
<title>Bootstrap101Template</title>
<!--Bootstrap-->
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"rel="stylesheet">
<!--HTML5shim和Respond.js是为了让IE8支持HTML5元素和媒体查询（mediaqueries）功能-->
<!--警告：通过file://协议（就是直接将html页面拖拽到浏览器中）访问页面时Respond.js不起作用-->
<!--[ifltIE9]>
<scriptsrc="
https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<scriptsrc="
https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，中医师承学院！</h1>
<!--jQuery(Bootstrap的所有JavaScript插件都依赖jQuery，所以必须放在前边)-->
<scriptsrc="
https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!--加载Bootstrap的所有JavaScript插件。你也可以根据需要只加载单个插件。-->
<scriptsrc="
https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
五、禁止响应布局 禁止响应式布局有如下几步：
1.移除此CSS文档中提到的设置浏览器视口（viewport）的标签：<meta>。
2.通过为.container类设置一个width值从而覆盖框架的默认width设置，例如width:970px!important;。请确保这些设置全部放在默认的BootstrapCSS文件的后面。注意，如果你把它放到媒体查询中，也可以略去!important。
3.如果使用了导航条，需要移除所有导航条的折叠和展开行为。
4.对于栅格布局，额外增加.col-xs-*类或替换掉.col-md-*和.col-lg-*。不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。
六、web前端常用的学习网站 w3cschool - 编程狮，随时随地学编程
Bootstrap中文网
在线咨询
